我是react-native的新手，我想在native-base中用react native stack navigation正确实现Drawer。很抱歉，我的问题可能太基本了。我只是需要正确的方法来实现它。
以下是我的 App.js
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import FirstScreen from './src/FirstScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createSwitchNavigator,
DrawerItems
} from 'react-navigation';
const DrawerContent = (props) =>(
<View style={{backgroundColor:'red'}}>
<View style={{
backgroundColor:'#f50057',
height:140,
alignItems: 'center',
justifyContent:'center'
}}>
<Text style={{color: 'white',fontSize:30}}>
Header
</Text>
</View>
<DrawerItems/>
</View>
);
const HomeScreenRouter = createDrawerNavigator(
{
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
},
{
contentComponent: <DrawerContent/>,
}
);
const AuthStack = createStackNavigator(
{
FirstScreen: FirstScreen
}
);
const AppContainer = createAppContainer(createSwitchNavigator(
{
App: HomeScreenRouter,
Auth: AuthStack
},{
initialRouteName: 'Auth',
}
));
export default class App extends Component{
constructor(props){
super(props)
this.state = {
isReady: false
}
}
async componentDidMount(){
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}).then((err) =>{
this.setState({ isReady: true });
})
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return(
<AppContainer/>
)
}
}
下面是我的 第一屏幕.js
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
export default class FirstScreen extends Component{
constructor(props){
super(props);
this.state = {
isReady: false
}
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() this.props.navigation.openDrawer() }>
<Icon name="menu"/>
</Button>
</Left>
<Body>
<Title>Be in</Title>
</Body>
<Right/>
</Header>
<Content>
</Content>
</Container>
);
}
}
该应用程序没有输出任何错误，但我得到了一个空白的白色页面与头。
我希望输出的结果是这样的 这个
先谢谢你。
react-navigation v5的简单解决方案
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStackNavigator} from '@react-navigation/stack';
// screens
import HomeScreen from '../screens/HomeScreen';
import CategoryScreen from '../screens/CategoryScreen';
import CartScreen from '../screens/CartScreen';
import MapScreen from '../screens/MapScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
function MainStackNavigator() {
return (
<Stack.Navigator headerMode="none" initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Cart" component={CartScreen} />
<Stack.Screen name="Category" component={CategoryScreen} />
<Stack.Screen name="Map" component={MapScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function AppRouter() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
);
}