Question

我在我的项目中使用react-native-router-flux。我有一个登录屏幕。操作员输入用户名和密码，然后单击“登录”按钮。成功验证后，会显示Settings个屏幕。此屏幕中有一个后退按钮，可以让操作员再次返回登录屏幕。我正在寻找一种方法来从后堆栈弹出登录屏幕，然后导航到下一个屏幕。通过这样做，单击设置屏幕的后退按钮，显示主屏幕。

似乎我的以下代码无效。

private onLoginPress = (): void => {
    .....

    // Display Settings screen if isValidatingForSettings is True otherwise display Home screen
    NavigationActions.pop();
    navigate(this.props.isValidatingForSettings ? Types.navSettings : Types.navHome);
}

我的HomeScreen重置堆栈。 HomeScreen.componentDidMount（）可以检查并重定向到prefs，但这看起来很hacky。我正在寻找一种干净的方式。

Answer 1

我可以通过我的Senttings屏幕的Back按钮自定义来解决这个问题。我创建了一个renderBackButton：

const renderBackButton = () => {
  return (
    <TouchableOpacity
      onPress={ () => navigate(Types.navHome) }>
        <Icon
          name='angle-left'
          size={ Metrics.icons.large }
          color={ Colors.grayXS }
          style={{ marginTop: -10 }}
        />
    </TouchableOpacity>
  );
}

export default renderBackButton();

然后将其分配到此屏幕的Scene：

<Scene
    hideNavBar={ false }
    key={ Types.Settings }
    component={ SettingsScreen }
    title={ I18n.t('settings') }
    renderBackButton={() => renderBackButton}/>

如何在导航到React Native中的下一个屏幕之前弹出当前屏幕？

1 个答案: