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

Question

我正在尝试开发一个应用程序来理解react原生基础知识。我正在使用react导航，我希望在我的应用程序的每个页面中都能看到菜单。我已经开发出了一些东西，比如；

-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';

屏幕导出默认类应用扩展组件{ render() {

( )；}} 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添加一个抽屉图标。

并添加login.js

从“react”导入React，{

}；从“react-native”导入{ StyleSheet，TouchableOpacity，}；从“native-base”导入{ Container，Header，Content，Button，Text }；类登录扩展组件{构造函数(Props){StyleSheet(Props)；} loginHandler=()=>{ this.props.navigation.navigate('DrewerNav') } render(){ return(登录<查看style={{alignItems：‘center’}>单击我！)}}导出默认登录；常量样式= StyleSheet.create({ container：{ flex: 1，backgroundColor：'#fff'，alignItems：'center'，justifyContent：'center'，}，})；

更重要的是:你可以参考https://github.com/ChanakaUOMIT/React-Native-Root-boiler-plate/tree/master这个项目..这里还在一个项目中添加了堆栈导航，标签导航和抽屉导航。

​

​

​

​

​

​

Answer 2

import 'react-native-gesture-handler';

import * as React from 'react';
import {View, TouchableOpacity, Image} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

import LoginPage from './src/pages/LoginPage';
import SecondPage from './src/pages/SecondPage';
import ThirdPage from './src/pages/ThirdPage';

// Import Custom Sidebar
import CustomSidebarMenu from './src/pages/CustomSidebarMenu';
import SignUpPage from './src/pages/SignUp';
import Home from './src/pages/Home';
import VendingMachineList from './src/pages/VendingMachineList';
import ProductList from './src/pages/ProductList';
import ProductDetails from './src/pages/ProductDetails';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const NavigationDrawerStructure = (props) => {
  //Structure for the navigatin Drawer
  const toggleDrawer = () => {
    //Props to open/close the drawer
    props.navigationProps.toggleDrawer();
  };

  return (
    <View style={{flexDirection: 'row'}}>
      <TouchableOpacity onPress={toggleDrawer}>
        <Image
          source={require('./src/assets/image/Vector.png')}
          style={{width: 30, height: 20, marginLeft: 5}}
        />
      </TouchableOpacity>
      <TouchableOpacity onPress={toggleDrawer}>
        <Image
          source={require('./src/assets/image/track-fresh.png')}
          style={{width: 30, height: 20, marginLeft: 5}}
        />
      </TouchableOpacity>

    </View>
  );
};

function firstScreenStack({navigation}) {
  return (
    <Stack.Navigator initialRouteName="LoginPage">
      <Stack.Screen
        name="LoginPage"
        component={LoginPage}
        
        options={{
          title: 'First Page', //Set Header Title
          headerLeft: () => (
            <NavigationDrawerStructure
              navigationProps={navigation}
            />
          ),
          headerStyle: {
            backgroundColor: '#f4511e', //Set Header color
          },
          headerShown:false,
          headerTintColor: '#fff', //Set Header text color
          headerTitleStyle: {
            fontWeight: 'bold', //Set Header text style
          },
        }}
      />
       <Stack.Screen
        name="SignUpPage"
        component={SignUpPage}
        
        options={{
          title: 'First Page', //Set Header Title
         
          headerLeft: () => (
            <NavigationDrawerStructure
              navigationProps={navigation}
            />
          ),
          headerStyle: {
            backgroundColor: '#f4511e', //Set Header color
          },
          headerShown:false,
          headerTintColor: '#fff', //Set Header text color
          headerTitleStyle: {
            fontWeight: 'bold', //Set Header text style
          },
        }}
      />
    </Stack.Navigator>
  );
}

function HomeStack({navigation}) {
  return (
    <Stack.Navigator
      initialRouteName="VendingMachineList"
      screenOptions={{
       
        headerLeft: () => (
          <NavigationDrawerStructure navigationProps={navigation} />
        ),
        headerStyle: {
          backgroundColor: '#fff', //Set Header color
        },
        headerTintColor: '#000', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        },
      }}>
      <Stack.Screen
        name="HomePage"
        component={Home}
        options={{
          title: '', headerShown:false, //Set Header Title
        }}
      />
      <Stack.Screen
        name="ProductList"
        component={ProductList}
        options={{
          title: '', headerShown:false, //Set Header Title
        }}
      />
       <Stack.Screen
        name="ProductDetails"
        component={ProductDetails}
        options={{
          title: '', headerShown:false, //Set Header Title
        }}
      />
      <Stack.Screen
        name="VendingMachineList"
        component={VendingMachineList}
        options={{
          title: '', headerShown:false, //Set Header Title
        }}
      />
      <Stack.Screen
        name="ThirdPage"
        component={ThirdPage}
        options={{
          title: 'Third Page', //Set Header Title
        }}
      />
    </Stack.Navigator>
  );
}

function secondScreenStack({navigation}) {
  return (
    <Stack.Navigator
      initialRouteName="SecondPage"
      screenOptions={{
        headerLeft: () => (
          <NavigationDrawerStructure navigationProps={navigation} />
        ),
        headerStyle: {
          backgroundColor: '#f4511e', //Set Header color
        },
        headerTintColor: '#fff', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        },
      }}>
      <Stack.Screen
        name="SecondPage"
        component={SecondPage}
        options={{
          title: 'Second Page', //Set Header Title
        }}
      />
      <Stack.Screen
        name="ThirdPage"
        component={ThirdPage}
        options={{
          title: 'Third Page', //Set Header Title
        }}
      />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: {marginVertical: 5},
          
        }}
        drawerContent={(props) => <CustomSidebarMenu {...props} />}>
        <Drawer.Screen
          name="LoginPage"
          options={{drawerLabel: 'First page Option',swipeEnabled:false}}
          component={firstScreenStack}
        />
         <Drawer.Screen
          name="Home"
          options={{drawerLabel: 'Second page Option'}}
          component={HomeStack}
        />
        <Drawer.Screen
          name="SecondPage"
          options={{drawerLabel: 'Second page Option'}}
          component={secondScreenStack}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;