React Native Router Flux 自动弹回上一个屏幕答案

【问题标题】：React Native Router Flux automatically pops back to previous screenReact Native Router Flux 自动弹回上一个屏幕
【发布时间】：2019-06-15 14:33:48
【问题描述】：

我在我的应用程序中使用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找到

【问题讨论】：

你能发布 OTP 组件的代码吗？
@SHG21 请看一下

标签： react-native react-native-router-flux

【解决方案1】：

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

【讨论】：