StackNavigator - 跳过一页堆栈中的页面

Question

在我的 React Native 应用程序中，我使用了 React Navigation 库来实现导航。我在 StackNavigator 上构建了整个应用程序。现在我运行遇到了一个我不知道如何解决的问题。有时基于 some condition，我想 skip 我的堆栈导航器中的一个页面。

比如我有四个屏幕。

const GuidelinesNavigation = StackNavigator({
  'ScreenOneRoute': { screen: ScreenOne },
  'ScreenTwoRoute': { screen: ScreenTwo },
  'ScreenThreeRoute': { screen: ScreenThree },
  'ScreenFourRoute': { screen: ScreenFour }
});

我想根据我在 second 屏幕上做出的决定跳过 third 屏幕，但我不知道该怎么做。

Answer 1

您可以根据需要在这些页面之间导航，例如假设你在 ScreenOne 中有一个按钮，按下该按钮后，你想将用户带到 ScreenThree，你可以这样做：

<TouchableOpacity onPress={() => this.props.navigation.navigate('ScreenThree')}>
    <Text>
        Go to Screen 3
    </Text>
</TouchableOpacity>

如果您有另一个指向 ScreenTwo 的按钮，请执行完全相同的操作，但将 'ScreenThree' 更改为 ScreenTwo

Answer 2

StackNavigator 为您的应用程序提供了一种在屏幕之间转换的方法，其中每个新屏幕都位于堆栈顶部。您应用中的每个屏幕都会收到一个 navigation 道具，应该使用它来导航到您应用的另一个屏幕。

您应该只添加带有某些条件的 if 语句并像下面的代码一样实现您的逻辑。您可以通过关注 link.

找到更多信息

class HomeScreen extends React.Component {
  render() {
    const {navigate} = this.props.navigation;

    return (
      <View>
        <Button
          onPress={() => {
            if (someOption) {
              navigate("ScreenThreeRoute");
            } else {
              navigate("ScreenFourRoute");
            }
          }}
          title="Change Screen"
        />
      </View>
     )
   }
}

StackNavigator - 跳过一页堆栈中的页面

StackNavigator - skipping one page the page in the stack

javascript

react-native

react-navigation

stack-navigator