作者:灿烂的胖羊羊 | 来源:互联网 | 2022-12-07 09:39
我正在尝试开发一个应用程序,以了解React Native的基础知识。我正在使用反应导航,我想在应用程序的每个页面中看到菜单。我已经发展出某种东西
-StackNavigtor
-Login Screen
-DrawerNagivation
-Screen1
-Screen2
但是,内部抽屉的组件无法从堆叠功能中受益。用堆栈导航器获取抽屉导航的最佳方法是什么,以便在应用程序的每个页面中获取菜单。
谢谢。
1> Chanaka..:
是的,您可以按照以下步骤操作。
App.js
import React, {Component} from 'react';'
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './src/authScreen/login/Login';
import DrawerNavigator from './src/navigation/drawerNavigation/DrawerNavigator';
export default class App extends Component{
render() {
return (
);
}
}
const AppStackNavigator = createStackNavigator({
Login:{
screen:Login
},
DrewerNav:{
screen:DrawerNavigator
}
},
navigatiOnOptions={
headerMode:'none'
})
然后创建src文件夹并创建DrawerNavigator.js。并输入以下代码。
import React from 'react' import { StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions, Image} from 'react-native';
import { createDrawerNavigator, DrawerItems } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome5';import DrawerScreen1
from '../../screens/drawerScreen/DrawerScreen1' import DrawerScreen2
from '../../screens/drawerScreen/DrawerScreen2' import DrawerScreen3
from '../../screens/drawerScreen/DrawerScreen3' // import { Right }
from 'native-base';
const CustomDrawerCompOnent= (props)=>(
)
export default createDrawerNavigator(>
DrawerScreen1: {
screen: DrawerScreen1,
navigationOptions: {
drawerLabel: 'DrawerScreen1',
drawerIcon: ({ tintColor }) => ,
} },
DrawerScreen2: {
screen: DrawerScreen2,
navigationOptions: {
drawerLabel: 'DrawerScreen2',
drawerIcon: ({ tintColor }) => ,
} },
DrawerScreen3: {
screen: DrawerScreen3,
navigationOptions: {
drawerLabel: 'DrawerScreen3',
drawerIcon: ({ tintColor }) => ,
} }, }, { drawerPosition :"right", contentComponent:CustomDrawerComponent
});
在这里CustomDrawerComponent添加一个Drawer图标。
并添加login.js
import React, { Component } from 'react';
import {View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import { Container, Header, Content, Button, Text } from 'native-base';
class Login extends Component{
constructor(props){
super(props);
}
loginHandler=()=>{
this.props.navigation.navigate('DrewerNav')
}
render(){
return(
Login
)
}
}
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
更多信息:您可以参考https://github.com/ChanakaUOMIT/React-Native-Root-boiler-plate/tree/master这个项目。在这里,您还可以在一个项目中添加Stack导航,Tab导航和Drawer导航。