Question

这是我的App导航器文件：


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' },
});

React Navigation 5 Alfa无法在来自不同父级导航器的嵌套子级之间导航

1 个答案: