使用堆栈导航器响应本机抽屉导航

Question

我正在尝试开发一个应用程序，以了解React Native的基础知识。我正在使用反应导航，我想在应用程序的每个页面中看到菜单。我已经发展出某种东西

-StackNavigtor -Login Screen -DrawerNagivation -Screen1 -Screen2

但是，内部抽屉的组件无法从堆叠功能中受益。用堆栈导航器获取抽屉导航的最佳方法是什么，以便在应用程序的每个页面中获取菜单。

谢谢。

Answer 1

是的，您可以按照以下步骤操作。

1. 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 (
      <AppStackNavigator />
    );
  }
}

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)=>(   <SafeAreaView>
           <View style={{height:150, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
               <Image source={require('../../Images/user.jpg')} style={{height:120, width:120, borderRadius:60}} />
           </View>
           <ScrollView>
               <DrawerItems {...props} />
           </ScrollView>   </SafeAreaView> )


     export default createDrawerNavigator(>     
       DrawerScreen1: {
         screen: DrawerScreen1,
         navigationOptions: {
           drawerLabel: 'DrawerScreen1',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   },

       DrawerScreen2: {
         screen: DrawerScreen2,
         navigationOptions: {
           drawerLabel: 'DrawerScreen2',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   },

       DrawerScreen3: {
         screen: DrawerScreen3,
         navigationOptions: {
           drawerLabel: 'DrawerScreen3',
           drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
         }   }, }, {   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(
            <View style={styles.container}> 
                <Text> Login </Text>
                <View style={{alignItems:'center'}}>
                    <Button onPress={this.loginHandler}>
                        <Text>Click Me!</Text>
                    </Button>
                </View>

             </View>
         )
     }
}

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导航。