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

Question

我是 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>

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

Answer 1

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

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

How to use state in React Native Reanimated event with TapGestureHandler

react-native

react-native-reanimated