设置动画并更改状态时，动画消失反应为原生

问题描述

我正在使用带有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,useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

  const size1 = btnAnim.interpolate({
    inputRange: [0,1],outputRange: ['30%','60%']
  })
  const size2 = btnAnim.interpolate({
    inputRange: [0,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,useNativeDriver: false
      }).start()
      // setMode(true)
    }
  }

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

但是如果我在开始动画后在此函数中更改组件的状态，请执行以下操作： setMode(false)或setMode(true)动画无法开始，即使按钮没有改变其大小 视频演示：https://youtu.be/deLZEKVnaBY

告诉我如何解决这个问题 谢谢

解决方法

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