官方推荐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 动态参数判空操作
Dec 22 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
使用Node搭建reactSSR服务端渲染架构
Aug 30 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php curl_init函数用法
2014/01/31 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
详解YII关联查询
2016/01/10 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python实现单链表的方法示例
2019/09/03 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python接口开发实现步骤详解
2020/04/26 Python
pandas按条件筛选数据的实现
2021/02/20 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
承诺书格式
2014/06/03 职场文书
音乐教师求职信
2014/06/28 职场文书
关于长城的导游词
2015/01/30 职场文书
通知函的格式
2015/04/27 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle