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

Question

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

例如，我有四个屏幕。

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的按钮，请执行完全相同的操作

stacknavigator 为您的应用提供了一种在屏幕之间过渡的方法，其中每个新屏幕都放在堆栈的顶部。应用程序中的每个屏幕都将接收导航 Prop，该屏幕应用于导航到您的应用程序的另一个屏幕。

您应该只添加如果语句具有某种条件，然后像以下代码中的那样实现逻辑。您可以通过遵循链接找到更多信息。

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>
     )
   }
}