0

我正在使用带有 expo cli 的 react native，并且我有一个组件：

import React, {useEffect, useState} from 'react'
import {View, TextInput, Text, TouchableOpacity, Animated, Easing} from 'react-native';
import s from './Login_style'
import {connect} from "react-redux";

const LoginInner = (props) => {

  const [mode, setMode] = useState(true)
  const btnAnim = new Animated.Value(0)

  const setModeAnim = (is) => {
    if (is) {
      Animated.timing(btnAnim, {
        toValue: 1,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false,
      }).start()
      // setMode(false)
    } else {
      Animated.timing(btnAnim, {
        toValue: 0,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

  const size1 = btnAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['30%', '60%']
  })
  const size2 = btnAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['60%', '30%']
  })

  return (
    <View style={s.page}>
      <View style={s.inputs}>
        <Text style={[s.text, s.title]}>{mode ? 'Вход' : 'Регистрация'}</Text>
        <View style={s.textInput}>
          <View>
            <Text style={[s.text, s.placeholder]}>Логин</Text>
          </View>
          <TextInput style={s.input}/>
        </View>
        <View style={s.textInput}>
          <View>
            <Text style={[s.text, s.placeholder]}>Пароль</Text>
          </View>
          <TextInput style={s.input}/>
        </View>
        <View style={s.actions}>

          <Animated.View style={[s.btn, s.loginBtn, {width: size2}]}>
            <TouchableOpacity style={s.touchableBtn} onPress={() => {
              setModeAnim(false)
            }}>
              <Text style={s.loginBtn_text}>{mode ? 'Вход' : '<--'}</Text>
            </TouchableOpacity>
          </Animated.View>


          <Animated.View style={[s.btn, s.regBtn, {width: size1}]}>
            <TouchableOpacity style={s.touchableBtn} onPress={() => {
              setModeAnim(true)
            }}>
              <Text style={s.loginBtn_text}>{mode ? '-->' : 'Регистрация'}</Text>
            </TouchableOpacity>
          </Animated.View>

        </View>
      </View>
    </View>
  )
}

const Login = connect((state) => {
  return {}
}, {})(LoginInner)

export default Login

这里我对这个功能感兴趣

const setModeAnim = (is) => {
    if (is) {
      Animated.timing(btnAnim, {
        toValue: 1,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false,
      }).start()
      // setMode(false)
    } else {
      Animated.timing(btnAnim, {
        toValue: 0,
        duration: 300,
        easing: Easing.out(Easing.exp),
        useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

当函数执行时，我在这里运行动画（暂时忽略注释掉的行）。动画确实有效。视频演示：https ://youtu.be/fiGy0gNej68

但是如果我在启动动画后在这个函数中改变了组件的状态： setMode(false)或者setMode(true)动画没有启动，即使是按钮也不会改变它们的大小视频演示：https ://youtu.be/deLZEKVnaBY

告诉我如何解决这个谢谢

4

1 回答 1

0

请做const btnAnim = React.useRef(new Animated.Value(0)).current——哈里森

于 2020-11-07T14:39:07.490 回答