react-native - 如何将 React-Navigation Drawer 菜单添加到我的屏幕?
问题描述
我有一个使用 React-Navigation 3.x 构建的主屏幕。我有一个标题、一些导航图标和一个底部选项卡菜单。它运行良好,但现在我想在屏幕上添加一个抽屉菜单,并在右上角添加一个图标来切换抽屉。
这是我的主屏幕(App.js)的简化版本:
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Activity1 from './Activity/Activity1';
import Activity2 from './Activity/Activity2';
import Activity3 from './Activity/Activity3';
import Calendar from './Screens/Calendar';
import Graph from './Screens/Graph';
import DrawerMenu from './components/DrawerMenu';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerRight: (<Button onPress={() => this.props.navigation.toggleDrawer()} title='Menu' />)
};
render() {
return (
<View style={styles.container}>
<View style={styles.iconContainer}>
<Icon name='icon1' onPress={this.navToActivity1} />
<Icon name='icon2' onPress={this.navToActivity2} />
<Icon name='icon3' onPress={this.navToActivity3} />
</View>
<View>
<DrawerMenu />
</View>
</View>
);
}
}
//create my main navigation stacks here
const Home = createStackNavigator({
HomeScreen,
Activity1,
Activity2,
Activity3,
});
//The following two are for the bottom tab bar only
const Calendar = createStackNavigator({ Calendar });
const Graph = createStackNavigator({ Graph });
const BottomTabNav = createBottomTabNavigator({
Home, Calendar, Graph
});
export default createAppContainer(TabNavigator);
这是 DrawerMenu.js 的代码
import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Profile from './Profile';
const SCREENWIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: SCREENWIDTH * 0.5,
drawerPosition: 'right',
};
const DrawerMenu = createDrawerNavigator({
Settings: { screen: Settings },
Profile: { screen: Profile },
},
DrawerConfig
);
export default createAppContainer(DrawerMenu);
我无法让抽屉工作。当我单击主屏幕右上角的“菜单”按钮调用 toggleDrawer() 时,出现“未定义不是对象(评估 'ae.props.navigation')”错误。
抽屉也无法使用手势激活,所以我认为我没有正确添加它。我在这里做错了什么?谢谢!!
解决方案
安装包 react-native-drawer https://www.npmjs.com/package/react-native-drawer
<Drawer
type="overlay"
ref={ref => (this._drawer = ref)}
content={<Sidebar />}
tapToClose={true}
openDrawerOffset={0.2} // 20% gap on the right side of drawer
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={drawerStyles}
tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
>
光盘
推荐阅读
- android - Android - 从文件管理器应用程序访问应用程序私有文件夹 getFilesDir() 路径
- javascript - 每 x 次自动将项目附加到列表中
- build - 如何修复“--asar 不接受任何参数,它只有子属性”警告
- c# - 如何根据以另一种形式给出的文本框值获取mysql数据库的值
- python - 在python中有多个变量的条件语句
- scala - 如何在运行时使用 ToolBox.eval 实例化用户定义的类
- php - 仅在满足 If 条件时将键和值添加到数组
- azure-devops-rest-api - 如何使用 REST API 和 Microsoft Flow 将文件从 Outlook 上传到 Azure DevOps WorkItem?
- jenkins - 使用 API 在多分支管道内创建新作业
- json - 如何获取特定 JSON 值的架构?