![](/img/trans.png)
[英]How can I create a custom navigation drawer in react-native using react-navigation v5?
[英]How to correctly implement Drawer in native-base in react-native using react-navigation v3
我是 react-native 的新手,我會喜歡使用 react native 堆棧導航在 native-base 中正確實現 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/>
)
}
}
下面是我的FirstScreen.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>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.