官方推荐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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
js实现限定范围拖拽的示例
Oct 26 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP数据类型的总结分析
2013/06/13 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
再探JavaScript作用域
2014/09/24 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python 时间处理datetime实例
2008/09/06 Python
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
业务代表的岗位职责
2013/11/16 职场文书
《三峡》教学反思
2014/03/01 职场文书
经营目标责任书
2015/05/08 职场文书
董事会决议范本
2015/07/01 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android