Question

我对本机反应还很陌生，但是我被困住了... 我有一个事件可以处理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 始终为假。

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

1 个答案: