reactjs - React navigation 5 alfa 无法在来自不同父导航器的嵌套子级之间导航

Question

这是我的应用导航器文件：

const SettingStack = createStackNavigator();
const settingStackScreen = () => {
    return (
        <SettingStack.Navigator >
            <SettingStack.Screen name="Setting" component={SettingScreen} />
            <SettingStack.Screen name="Detail" component={DetailScreen} />
        </SettingStack.Navigator>
    );
}

const ElegantStack = createStackNavigator();
const elegantStackScreen = () => {
    return (
        <ElegantStack.Navigator >
            <ElegantStack.Screen name="Home" component={HomeScreen} />
            <ElegantStack.Screen name="Todos" component={TodosScreen} />
        </ElegantStack.Navigator>
    );
}

const Tab = createMaterialBottomTabNavigator();
const appNavigator = () => {
    return (
        <NavigationNativeContainer >
            <Tab.Navigator >
                <Tab.Screen name="Elegant" component={elegantStackScreen} />
                <Tab.Screen name="Setting" component={settingStackScreen} />
            </Tab.Navigator>
        </NavigationNativeContainer>
    );
}

这也是我的 HomeScreen 文件：

const home = () => {
    const navigation = useNavigation();
    return (
        <View style={styles.screen}>
            <Text>Home</Text>

            <Button title="Go Detail" onPress={() => { navigation.navigate('Detail') }} />
            <Button title="Go Todos" onPress={() => { navigation.navigate('Todos') }} />

        </View>
    );
}

我想从主屏幕导航到详细屏幕，但起初，手动进入设置选项卡后它不起作用，它将在下次尝试时起作用有人对此有任何想法吗？

我正在使用 react-navigation5-alfa 和 react-native 0.61.1

Answer 1

我刚刚找到了解决方案。

这是您应该遵循的方法，如文档中所述。

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

在你的情况下，这应该是，

navigation.navigate('Setting', {
  screen: 'Detail',
  params: { key: 'value' },
});