动画和改变状态时，动画消失（反应本机）

Question

我正在使用带有 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

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

Answer 1

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

动画和改变状态时，动画消失（反应本机）

When animating and changing state, the animation disappears(react native)

javascript

state

reactjs

react-native

react-animations