详解React Native顶|底部导航使用小技巧


Posted in Javascript onSeptember 14, 2017

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。

本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。

 简介

react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:

  • 导航 -> StackNavigator
  • 底部或者顶部tab -> TabNavigator
  • 侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

效果展示

详解React Native顶|底部导航使用小技巧

 实现代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Button,
  Text,
  View,
  Image,
  StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";


class Home extends React.Component {
  static navigationOptions = {
    tabBarLabel: '热点',
    tabBarIcon: ({ focused, tintColor }) => (
      <Image
        source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
      />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>!这是热点</Text>
      </View>
    );
  }
}

class Circle extends React.Component {
  static navigationOptions = {
    tabBarLabel: '圈子',
    tabBarIcon: ({ focused, tintColor }) => (
      <Image
        source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
      />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>!这是圈子</Text>
      </View>
    );
  }
}

class Tools extends React.Component {
  static navigationOptions = {
    tabBarLabel: '工具',
    tabBarIcon: ({ focused, tintColor }) => (
      <Image
        source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
      />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>!这是工具</Text>
      </View>
    );
  }
}

class Mypage extends React.Component {
  static navigationOptions = {
    tabBarLabel: '我的',
    tabBarIcon: ({ focused, tintColor }) => (
      <Image
        source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
        style={{ width: 26, height: 26, tintColor: tintColor }}
      />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>!这是我的</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  }
});


const MyApp = TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Circle: {
      screen: Circle,
    },
    Tools: {
      screen: Tools,
    },
    Mypage: {
      screen: Mypage,
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#4BC1D2',
      inactiveTintColor: '#000',
      showIcon: true,
      showLabel: true,
      upperCaseLabel: false,
      pressColor: '#823453',
      pressOpacity: 0.8,
      style: {
        backgroundColor: '#fff',
        paddingBottom: 0,
        borderTopWidth: 0.5,
        borderTopColor: '#ccc',
      },
      labelStyle: {
        fontSize: 12,
        margin: 1
      },
      indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
    },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
  });

module.exports = MyApp;

配置说明

NavigationOptions

当然,通过NavigationOptions来配置我们的tabBarItem:

  • title - 标题
  • tabBarVisible - 是否可见
  • tabBarIcon - 配置图片,当然,完全可以不使用图片
  • tabBarLabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题

 TabNavigatorConfig

  • tabBarComponent- 用作标签栏的组件,例如 (这是iOS上的默认设置), (这是Android上的默认设置)TabBarBottomTabBarTop
  • tabBarPosition- 标签栏的位置可以是或'top''bottom'
  • swipeEnabled - 是否允许在标签之间进行滑动
  • animationEnabled - 是否在更改标签时动画
  • lazy - 是否根据需要懒惰呈现标签,而不是提前制作
  • tabBarOptions - 配置标签栏,如下所示。
  • 几个选项被传递到底层路由器来修改导航逻辑:
  • initialRouteName - 首次加载时初始标签路由的routeName
  • order - 定义选项卡顺序的routeNames数组
  • paths - 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。
  • backBehavior - 后退按钮是否会使Tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialRoutenoneinitialRoute

tabBarOptions for (iOS上的默认标签栏)TabBarBottom

  • activeTintColor - 活动标签的标签和图标颜色
  • activeBackgroundColor - 活动选项卡的背景颜色
  • inactiveTintColor - 非活动标签的标签和图标颜色
  • inactiveBackgroundColor - 非活动标签的背景颜色
  • showLabel - 是否显示标签的标签,默认为true
  • style - 标签栏的样式对象
  • labelStyle - 标签标签的样式对象
  • tabStyle - 标签的样式对象

tabBarOptions for (Android上的默认标签栏)TabBarTop

  • activeTintColor - 活动标签的标签和图标颜色
  • inactiveTintColor - 非活动标签的标签和图标颜色
  • showIcon - 是否显示标签的图标,默认值为false
  • showLabel - 是否显示标签的标签,默认为true
  • upperCaseLabel - 是否使标签大写,默认为true
  • pressColor - 材质波纹颜色(Android> = 5.0)
  • pressOpacity - 按压标签的不透明度(iOS和Android <5.0 only)
  • scrollEnabled - 是否启用可滚动选项卡
  • tabStyle - 标签的样式对象
  • indicatorStyle - 标签指示器的样式对象(选项卡底部的行)
  • labelStyle - 标签标签的样式对象
  • iconStyle - 标签图标的样式对象
  • style - 标签栏的样式对象

小技巧

1.去掉安卓下的下划线,设置:tabBarOptions => indicatorStyle:{ height: 0 };

2.底部导航在导航最上方添加一条分割线,设置:tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc';

3.导航安卓图标和文字间隙比较大,手动调整小设置:tabBarOptions => labelStyle => margin: 0;

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

Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
如何优化vue打包文件过大
Apr 13 Vue.js
Angularjs 1.3 中的$parse实例代码
Sep 14 #Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 #Javascript
基于node.js express mvc轻量级框架实践
Sep 14 #Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 #Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 #Javascript
基于js中document.cookie全面解析
Sep 14 #Javascript
基于Vue过渡状态实例讲解
Sep 14 #Javascript
You might like
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php简单实现MVC
2015/02/05 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
商务邀请函范文
2014/01/14 职场文书
诚信承诺书
2015/01/19 职场文书
建议书的格式及范文
2015/09/14 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL