如何使用 TapGestureHandler 在 React Native Reanimated 事件中使用状态答案

【问题标题】：How to use state in React Native Reanimated event with TapGestureHandler如何使用 TapGestureHandler 在 React Native Reanimated 事件中使用状态
【发布时间】：2021-02-15 03:55:03
【问题描述】：

我对 react native 还很陌生，但我被困住了...... 我有一个处理 TapGestureHandler 按钮上的动画的事件

this.isLoginIn = new Animated.Value(false);
    this.onStateChange = event([
      {
        nativeEvent: ({ state }) =>
          block([
            cond(eq(state, State.END), [
              set(
                this.buttonOpacity,
                ReanimatedUtils.runTiming(new Clock(), 1, 0)
              ),
              set(this.isLoginIn, true);
            ]),
          ]),
      },
    ]);


<TapGestureHandler
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View
        style={{
          ...styles.container,
          ...animatedStyle,
          ...style,
        }}
      >
        <Text style={{ ...styles.text, ...textStyle }}>
          {title.toUpperCase()}
        </Text>
      </Animated.View>
    </TapGestureHandler>

我愿意使用这个 isLoginIn 值来显示不同类型的表单

{this.isLoginIn._value === true ? (
            <LoginInput
              title={"Login"}
              buttonText="Login"
              onPress={() => {}}
              onSignUpPress={() => {}}
            ></LoginInput>
          ) : (
            <LoginInput
              title={"Registration"}
              buttonText="SignIn"
              onPress={() => {}}
              onSignUpPress={() => {}}
            ></LoginInput>
          )}
        </Animated.View>

但这不起作用，我真的不知道如何正确地提出我的问题，以在互联网上找到解决方案。我试图在 state 中使用一个值，但这不起作用，因为它与我猜想的 UI 线程位于不同的线程上。请有人帮帮我..

【问题讨论】：

标签： react-native react-native-reanimated

【解决方案1】：

isLoginIn 不需要是动画值。只需将其替换为正常状态值，如下所示： const [isLoginIn, setIsLoginIn] = React.useState(false);，当你的动画完成后，只需使用回调来更新你的状态，使用 call([], () => setIsLoginIn(true)); 而不是 set(this.isLoginIn, true); 因为 set 不会重新渲染你的组件和 isLoginIn总是假的。

【讨论】：

@GabinMD 我很高兴。祝你好运））