Question

实施 createDrawerNavigator ，但不起作用。

主要组件

   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上运行此应用程序。在代码中没有错误，但不知道为什么导航抽屉无法正确打开。

我们将非常感谢您的帮助

谢谢

Answer 1

这是因为有react-native-gesture-handler软件包。您应该链接此软件包。需要进行一些手动设置。检查MainActivity.java部分。

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

React Native createDrawerNavigator没有打开导航抽屉

1 个答案: