将stack和bottomnavigator一起使用react native

Question

我正试图在主屏幕上添加抽屉导航，我该怎么做？这是我的密码。

class Navigation extends React.Component {
render() {
return (
<NavigationContainer>
<StatusBar barStyle="light-content" />
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={{ title: this.state.name, }} />
<Stack.Screen name="DrawerScreen" options={{ title: 'DrawerScreen' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
}

如何在导航类中使用DrawerScreen？我试过了，但它给了我一个错误，说找不到抽屉屏幕的组件。

function DrawerScreen() {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}

Answer 1

您可以这样做：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { View, Text, StyleSheet,Button, SafeAreaView, ScrollView, Image } from "react-native";
import Load from './components/Load';
import Home from './components/Homescreen'
import SignIn from './components/SignIn'
import SignUp from './components/SignOut'
const MainDrawer = createDrawerNavigator({
SignUp:SignUp,
},
);
const App = createStackNavigator({
Load: {
screen: Load,
navigationOptions: {
headerShown:false
},
},
Home: {
screen: Home,
navigationOptions: {
headerShown:false,
},
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerShown:false,
},
},
SignUp: {
screen: MainDrawer,
navigationOptions: {
headerShown:false,
},
},
});
export default createAppContainer(App);

希望这能有所帮助！