Question

我在我的应用中使用react native router flux。我有三个屏幕。首先是Splash，其次是手机号码，其次是OTP。当用户成功输入手机号码后，我会将用户从手机号码屏幕重定向到OTP屏幕，但是几秒钟后，OTP屏幕将自动移至手机号码屏幕。以下是我的路由器代码

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="root" hideNavBar>
        <Scene key="splash" component={SplashScreen} hideNavBar initial />
        <Scene key="mobileLoginScreen" component={MobileLoginScreen} />
        <Scene key="otpLoginScreen" component={OTPLoginScreen} />
      </Scene>

    </Router>
  );
};

以下是我成功输入正确的手机号码并转到OTP屏幕时的代码

const loginUserSuccess = (dispatch, response) => {
  dispatch({
    type: MOBILE_NUMBER_LOGIN_USER_SUCCESS,
    payload: response
  });

  if (response.data.status === 1) {
    Actions.otpLoginScreen();
    // console.log(response.data.msg);
  } else {
    // console.log(response.data.msg);
    loginUserFail(dispatch, response.data.msg);
  }
};

我不明白为什么OTP屏幕会自动弹出回到手机号码屏幕？

我的启动画面代码如下

class SplashScreen extends Component {
  componentDidMount() {
    setInterval(() => {
      Actions.replace("mobileLoginScreen");
      // Actions.mobileLoginScreen();
    }, 4000);
  }

以下是我的OTP屏幕代码

class OTPLoginScreen extends Component {
render() {
    return (
      <View>
        <Text>OTP Screen</Text>
      </View>
    );
  }

}

完整代码位于https://github.com/pritish12/reactreduxdemo

Answer 1

我不知道react-native-router-flux的实现，但是我假设您的SplashScreen在过渡到OTP屏幕后第二次安装，这触发了SplashScreen的componentDidMount方法，因此启动了启动手机屏幕的间隔。您可以在componentDidMount方法中设置断点或console.log(..)来进行进一步调查

React Native Router Flux自动弹出回到上一屏幕

1 个答案: