react-native - 从 React Native 中的抽屉导航到单个页面

问题描述

我有三个底部选项卡，每个选项卡都可以访问相同的抽屉导航。在抽屉导航中，我使用抽屉内容和抽屉项目来自定义内容链接到选项卡之外的页面（即，我不希望这些页面上显示选项卡）。但是，我似乎无法传递导航道具 - 我收到“navigation.navigate 不是函数”。

编辑：基本上我想用后退按钮等从抽屉链接到选项卡之外的页面（不显示选项卡）。我想我需要一个 createStackNavigator 在某处但我不知道如何合并它。

这是代码：

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function TabOne({ navigation }) {
    return (
         <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
             <Drawer.Screen name="Tab One" component={TabOneScreen} />
         </Drawer.Navigator>
    );
}

function TabTwo({ navigation }) {
    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
            <Drawer.Screen name="Tab Two" component={TabTwoScreen} />
        </Drawer.Navigator>
    );
}

function TabThree({ navigation }) {
    return (
        <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} navigation={navigation} />}>
            <Drawer.Screen name="Tab Three" component={TabThreeScreen} />
        </Drawer.Navigator>
    );
}

function CustomDrawerContent(props, navigation) {
    return (
        <DrawerContentScrollView {...props}>
            <DrawerItemList {...props} />

            // THIS LINE HERE
            <DrawerItem label="Settings" onPress={() => navigation.navigate('Settings')} />

            <DrawerItem label="Logout" onPress={() => LogOut()} />
        </DrawerContentScrollView>
    )
}

function TabOneScreen() {
    return (
        <>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Tab One Screen</Text>
        </View>
        </>
    );
 }

 function TabTwoScreen() {
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Tab Two Screen</Text>
         </View>
     );
 }

 function TabThreeScreen() {
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
             <Text>Tab Three Screen</Text>
         </View>
     );
 }

 export default function App() {
     return (
         <NavigationContainer>
             <Tab.Navigator>
                 <Tab.Screen name="Tab One" component={TabOne} />
                 <Tab.Screen name="Tab Two" component={TabTwo} />
                 <Tab.Screen name="Tab Three" component={TabThree} />
             </Tab.Navigator>
         </NavigationContainer>
     );
 }

另外，我不确定如何在 DrawerItem 中“包含”链接的设置页面/组件，因为它不包含在任何导航堆栈中。

这样做的正确方法是什么？

干杯，马特

标签： react-nativereact-native-navigation

react-native - 从 React Native 中的抽屉导航到单个页面

问题描述

解决方案

推荐阅读