官方推荐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 相关文章推荐
Javascript拓展String方法小结
Jul 08 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
vue项目实现图片上传功能
Dec 23 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共享内存使用与信号控制实例分析
2018/05/09 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
js 控制页面跳转的5种方法
2013/09/09 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
下载给定网页上图片的方法
2014/02/18 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
PageFactory设计模式基于python实现
2020/04/14 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
关于逃课的检讨书
2014/01/23 职场文书
技校个人求职信范文
2014/01/25 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
餐饮投资计划书
2014/04/25 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
转正申请报告格式
2015/05/15 职场文书
圣诞晚会主持词
2015/07/01 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js