javascript - React Native createDrawerNavigator 未打开导航抽屉
问题描述
实施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;
包.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 中的所有库。我在安卓上运行这个应用程序。在代码中没有错误,但不知道为什么导航抽屉没有正确打开。
帮助将不胜感激
谢谢
解决方案
这是因为 react-native-gesture-handler
包。你应该链接这个包。需要做一些手动设置。检查MainActivity.java
部分。
推荐阅读
- kubernetes - Kubernetes 中没有 AWS 卷但“绑定”PVC
- javascript - 如何在javascript中的两个输入之间留一个空格?
- node.js - 如何将 sitemap.xml 文件上传到 Heroku?
- python - 您如何在 BeautifulSoup 的 for 循环中使用 .find 正确过滤链接?
- selenium - 如何使用 Selenium Webdriver Python 跳过身份验证弹出窗口
- python - Geopandas - ValueError:无法转换幼稚的几何图形。请先在对象上设置 crs
- java - 推荐用于表类数据和随机(索引)读取访问的 Java(或 Kotlin)序列化格式?
- typescript - 用于前端和后端的打字稿导入/导出
- reactjs - 在 react native 中创建日历组件
- javascript - 在页面中搜索特定 URL 并将第一个实例复制到剪贴板