我正在尝试创建一个堆栈导航,抽屉导航和底部标签导航。我的堆栈导航和底部标签导航工作正常,但不能使抽屉导航。你能告诉我我错过了什么吗?它似乎我抽屉导航和标签导航有冲突,在我的代码...但找不到原因???请帮助。
我的应用程序.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView,DrawerItemList,DrawerItem, } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';
function DetailsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings screen</Text>
<Button
title="Go to Cards"
onPress={() => navigation.navigate('Cards')}
/>
</View>
);
}
const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName="Home">
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="FeedScreen" component={FeedScreen} />
<HomeStack.Screen name="Message" component={Message} />
</HomeStack.Navigator>
);
}
const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
<SettingsStack.Screen name="Cards" component={Cards} />
</SettingsStack.Navigator>
);
}
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen(){
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileScreen}/>
{/* <ProfileStack.Screen name="Cards" component={Cards}/> */}
</ProfileStack.Navigator>
)
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator screenOptions={{ drawerPosition: 'left' }}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Message" component={Message} />
</Drawer.Navigator>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
1条答案
按热度按时间svmlkihl1#
我已经找到了解决方案,我只是将选项卡导航输入到抽屉导航中,现在它工作正常