React Native createDrawerNavigator 不打开导航抽屉 [英] React Native createDrawerNavigator not opening Navigation Drawer

问题描述

实现了 createDrawerNavigator 但不起作用.

Implement createDrawerNavigator but not working.

主要组件

   import React, { Component } from 'react';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer ,createDrawerNavigator } from 'react-navigation';  
import { Icon } from 'react-native-elements';


const MenuNavigator = createStackNavigator({
  Menu: { screen: Menu },
  Dishdetail: { screen: Dishdetail }
},
{
  initialRouteName: 'Menu',
  navigationOptions: {
      headerStyle: {
          backgroundColor: "#512DA8"
      },
      headerTintColor: '#000',
      headerTitleStyle: {
          color: "#fff"            
      }
  }
}
);

const HomeNavigator = createStackNavigator({
  Home: { screen: Home }
}, {
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
        backgroundColor: "#512DA8"
    },
    headerTitleStyle: {
        color: "#fff"            
    },
    headerTintColor: "#fff"  
  })
});

const MainNavigator = createDrawerNavigator({
  Home: 
    { 
      screen: HomeNavigator,
      navigationOptions: {
        title: 'Home',
        drawerLabel: 'Home'
      }
    },
  Menu: 
    { screen: MenuNavigator,
      navigationOptions: {
        title: 'Menu',
        drawerLabel: 'Menu'
      }, 
    }
}, {
drawerBackgroundColor: '#D1C4E9',
});

class Main extends Component {


  render() {

    return (

      <View style={{flex:1,paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
            <MainNavigator />
        </View>

    );
  }
}

const App = createAppContainer(MainNavigator);


export default App;

package.json

 "dependencies": {
        "feather-icons-react": "^0.3.0",
        "react": "16.6.3",
        "react-native": "0.57.8",
        "react-native-elements": "^1.0.0-beta7",
        "react-native-gesture-handler": "^1.0.12",
        "react-native-vector-icons": "^4.6.0",
        "react-navigation": "^3.0.9"
      },
      "devDependencies": {
        "babel-jest": "23.6.0",
        "jest": "23.6.0",
        "metro-react-native-babel-preset": "0.51.0",
        "react-test-renderer": "16.6.3"
      },

从侧边栏没有打开导航抽屉，我添加了来自 react-navigation 的所有库.我在 android 上运行这个应用程序.在代码中没有错误，但不知道为什么导航抽屉没有正确打开.

From Side bar not opening the navigation drawer,I have added all libraries from react-navigation. I am running this app on android. In code there is no error but don't know why navigation drawer isn't opening correctly.

非常感谢您的帮助

谢谢

推荐答案

这是因为 react-native-gesture-handler 包.你应该链接这个包.需要做一些手动设置.检查 MainActivity.java 部分.

This is because of react-native-gesture-handler package. you should link this package. need to do some manuel setups. check MainActivity.java part.

https://reactnavigation.org/docs/en/getting-started.html

这篇关于React Native createDrawerNavigator 不打开导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！