如何使用 navigation.navigate -react native 在深度嵌套的导航器中设置特定屏幕

Question

在 StackScreen 组件中，您可以看到按钮导航到深度嵌套的导航器 MyMatches，这是一个 TopTab 导航器。如果我按下 StackScreen 组件中的按钮，默认情况下会打开 MyMatches1 屏幕，因为它首先在 MyMatchesTopTabNavigator 中提到。但是，如果我想在按下按钮时打开 MyMatches2 屏幕怎么办？我无法进一步选择儿童屏幕。请帮助。

这是演示 link。下载 Expo 以查看演示 https://snack.expo.io/3h_Sv-Izw

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

const MyMatchesListScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>My Matches List</Text>
    </View>
  );
};

const MatchesListScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>Matches List</Text>
    </View>
  );
};

const StackScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>Stack Screen</Text>
      **
      <Button
        title="Go to stack Screen"
        onPress={() => {
          navigation.navigate('MyTabs', {screen: 'MyMatches'});
        }}
      />
      **
    </View>
  );
};

function MatchesTopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Matches1" component={MatchesListScreen} />
      <Tab.Screen name="Matches2" component={MatchesListScreen} />
    </Tab.Navigator>
  );
}

function MyMatchesTopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="MyMatches1" component={MyMatchesListScreen} />
      <Tab.Screen name="MyMatches2" component={MyMatchesListScreen} />
    </Tab.Navigator>
  );
}

function HomeBottomNavigator() {
  return (
    <BottomTab.Navigator>
      <Tab.Screen name="Matches" component={MatchesTopTabNavigator} />
      <Tab.Screen name="MyMatches" component={MyMatchesTopTabNavigator} />
    </BottomTab.Navigator>
  );
}

function StackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="StackScreen" component={StackScreen} />
        <Stack.Screen name="MyTabs" component={HomeBottomNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <StackNavigator />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 20,
    height: '100%',
    width: '100%',
    flex: 1,
  },
  matchesListContainer: {
    height: '100%',
    width: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Answer 1

有点晚了，但是对于那些来这里的人：

navigation.navigate('MyTabs', {
    screen: 'MyMatches',
    params: {
      screen: 'MyMatches2',
      params: {
        param1: '',
      },
    },
  })

如何使用 navigation.navigate -react native 在深度嵌套的导航器中设置特定屏幕

How to set a specific screen in deeply nested navigator with navigation.navigate -react native

javascript

react-native

react-navigation

react-navigation-v5