看了官方文档的导航器对比, 发现现在主推的方案是一个单独的导航库 react-navigation, 据说它的使用十分简单. 我就写个 demo, 试了一下.
一, 主要构成
按使用形式主要分三部分:
StackNavigator: 类似于普通的 Navigator, 屏幕上方导航栏
TabNavigator: 相当于 ios 里面的 TabBarController, 屏幕下方的标签栏
DrawerNavigator: 抽屉效果, 侧边滑出
二, 使用
1. 新建项目
react-native init ComponentDemo
2. 在应用中安装此库
npm install --save react-navigation
安装完发现是 beta 版本(v1.0.0-beta.7) , 竟然有坑?! 一会儿我们会详细说这个坑~
3. 测试 TabNavigator,StackNavigator 和 DrawerNavigator
(1)新建 HomePage.js
- import React from 'react';
- import {
- StyleSheet,
- View,
- Text,
- Button,
- Image
- } from 'react-native';
- import {
- StackNavigator,
- TabNavigator
- } from 'react-navigation';
- import ChatScreen from './ChatScreen';
- import MinePage from './MinePage';
- class HomePage extends React.Component{
- static navigationOptions={
- title: '首页',// 设置标题内容
- header:{
- backTitle: ' ',// 返回按钮标题内容(默认为上一级标题内容)
- }
- }
- constructor(props) {
- super(props);
- }
- render() {
- const {navigate} = this.props.navigation;
- return (
- <View style={styles.container}>
- <Text style={{padding:10}}>Hello, Navigation!</Text>
- <Button
- onPress={() => navigate('Chat',{user:'Sybil'})}
- title="点击跳转"/>
- </View>
- )
- }
- }
- const MainScreenNavigator = TabNavigator({
- Home: {
- screen: HomePage,
- navigationOptions: {
- tabBar: {
- label: '首页',
- icon: ({tintColor}) => (
- <Image
- source={require('./image/bar_home_nomarl@3x.png')}
- style={[{tintColor: tintColor},styles.icon]}
- />
- ),
- },
- }
- },
- Certificate: {
- screen: MinePage,
- navigationOptions: {
- tabBar: {
- label: '我的',
- icon: ({tintColor}) => (
- <Image
- source={require('./image/bar_center_normal@3x.png')}
- style={[{tintColor: tintColor},styles.icon]}
- />
- ),
- },
- }
- },
- }, {
- animationEnabled: false, // 切换页面时不显示动画
- tabBarPosition: 'bottom', // 显示在底端, android 默认是显示在页面顶端的
- swipeEnabled: false, // 禁止左右滑动
- backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转
- tabBarOptions: {
- activeTintColor: '#008AC9', // 文字和图片选中颜色
- inactiveTintColor: '#999', // 文字和图片默认颜色
- showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
- indicatorStyle: {height: 0}, // android 中 TabBar 下面会显示一条线, 高度设为 0 后就不显示线了
- style: {
- backgroundColor: '#fff', // TabBar 背景色
- },
- labelStyle: {
- fontSize: 12, // 文字大小
- },
- },
- });
- const styles = StyleSheet.create({
- container:{
- flex: 1,
- backgroundColor:'#fff'
- },
- icon: {
- height: 22,
- width: 22,
- resizeMode: 'contain'
- }
- });
- const SimpleApp = StackNavigator({
- Home: {screen: MainScreenNavigator},
- Chat:{screen:ChatScreen},
- });
- export default SimpleApp;
(2)新建 ChatScreen.js
- import React from 'react';
- import {
- Button,
- Image,
- View,
- Text
- } from 'react-native';
- class ChatScreen extends React.Component {
- static navigationOptions = {
- title:'聊天',
- };
- render() {
- const {params} = this.props.navigation.state;
- return (
- <View style={{backgroundColor:'#fff',flex:1}}>
- <Text style={{padding:20}}>Chat with {params.user}</Text>
- </View>
- );
- }
- }
- export default ChatScreen;
(3)新建 MinePage.js
- import React,{Component} from 'react';
- import {
- Button,
- Image,
- View,
- Text,
- StyleSheet
- } from 'react-native';
- import {
- DrawerNavigator
- } from 'react-navigation';
- import MyNotificationsScreen from './MyNotificationsScreen';
- class MinePage extends Component{
- static navigationOptions = {
- title:'我的',
- drawerLabel: '我的',
- // Note: By default the icon is only shown on iOS. Search the showIcon option below.
- drawerIcon: ({ tintColor }) => (
- <Image
- source={require('./image/chat@3x.png')}
- style={[styles.icon, {tintColor: tintColor}]}
- />
- ),
- };
- render(){;
- return(
- <View style={{backgroundColor:'#fff',flex:1}}>
- <Text style={{padding:20}}>Sybil</Text>
- <Button
- style={{padding:20}}
- onPress={() => this.props.navigation.navigate('DrawerOpen')}
- title="点击打开侧滑菜单"
- />
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- icon: {
- width: 24,
- height: 24,
- },
- });
- const MyChatNavigator = DrawerNavigator({
- MyChat: {
- screen: MinePage,
- },
- Notifications: {
- screen: MyNotificationsScreen,
- },
- },{
- drawerWidth: 220, // 抽屉宽
- drawerPosition: 'left', // 抽屉在左边还是右边
- // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
- contentOptions: {
- initialRouteName: MinePage, // 默认页面组件
- activeTintColor: '#008AC9', // 选中文字颜色
- activeBackgroundColor: '#f5f5f5', // 选中背景颜色
- inactiveTintColor: '#000', // 未选中文字颜色
- inactiveBackgroundColor: '#fff', // 未选中背景颜色
- style: { // 样式
- }
- }
- });
- export default MyChatNavigator;
(4)编写 MyNotificationsScreen.js
- import React from 'react';
- import {
- StyleSheet,
- View,
- Text,
- Button,
- Image
- } from 'react-native';
- class MyNotificationsScreen extends React.Component {
- static navigationOptions = {
- title:'通知',
- drawerLabel: '通知',
- drawerIcon: ({ tintColor }) => (
- <Image
- source={require('./image/notif@3x.png')}
- style={[styles.tabIcon, {tintColor: tintColor}]}
- />
- ),
- };
- render() {
- return (
- <View style={{backgroundColor:'#fff'}}>
- <Button
- style={{padding:20}}
- onPress={() => this.props.navigation.navigate('DrawerOpen')}
- title="点击打开侧滑菜单"
- />
- <Button
- onPress={() => this.props.navigation.goBack()}
- title="返回我的界面"
- />
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- tabIcon: {
- width: 24,
- height: 24,
- },
- });
- export default MyNotificationsScreen;
(5)运行
报错啦? 这就是上面我们所说的坑~
什么原因呢? 原来是测试版的 bug, 在目录中找到 node_modules/react-navigation/src/views/Header.js 的第 12 行, 删除它就 OK 了~
Ps: 遗憾的是这个错误我没有留图啊~ 在我即将发表这篇文章的时候, 最新版已经变为 (v1.0.0-beta.9) 了, 最新版已经将上述的 bug 修改了!
好了, 再次运行~
上一个动态效果图:
想详细了解 React Navigation, 可以阅读这一篇英文的入门文档 https://reactnavigation.org/docs/intro/ , 希望对你们有所帮助~
来源: http://www.jb51.net/article/139736.htm