官方推荐react-navigation的具体使用详解


Posted in Javascript onMay 08, 2018

看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。

一、主要构成

按使用形式主要分三部分:

  1. StackNavigator: 类似于普通的Navigator,屏幕上方导航栏
  2. TabNavigator: 相当于ios里面的TabBarController,屏幕下方的标签栏
  3. 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的具体使用详解

想详细了解React Navigation,可以阅读这一篇英文的入门文档,希望对你们有所帮助~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JSON取值前判断
Dec 23 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 #Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js 通用订单代码
2013/12/23 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
工地门卫岗位职责
2013/12/30 职场文书
股份合作协议书范本
2014/04/14 职场文书
园艺师求职信
2014/04/27 职场文书
社区平安建设方案
2014/05/25 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
导游词之太原天龙山
2020/01/02 职场文书