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

Question

在StackScreen组件中，您可以看到按钮导航到深度嵌套的导航器MyMatches，这是一个TopTab导航器。如果我按下StackScreen组件中的按钮，MyMatches1屏幕默认打开，因为它在MySMatchesTopTabNavigator中首先提到。但是，如果我想在按下按钮时打开MyMatches2屏幕，该怎么办。我不能再选择儿童屏幕了。请帮忙。

这是演示链接。下载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: '',
},
},
})