详解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 27 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
js 函数性能比较方法
Aug 24 Javascript
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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php实现encode64编码类实例
2015/03/24 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python批量修改xml属性的实现方式
2020/03/05 Python
通过cmd进入python的步骤
2020/06/16 Python
python实现二分查找算法
2020/09/18 Python
Pandas之缺失数据的实现
2021/01/06 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
文职个人求职信范文
2013/09/23 职场文书
中国梦的演讲稿
2014/01/08 职场文书
英语老师推荐信
2014/02/26 职场文书
励志演讲稿200字
2014/08/21 职场文书
项目合作意向书
2015/05/08 职场文书
行政上诉状范文
2015/05/23 职场文书
2019消防宣传标语!
2019/07/10 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
python实现双链表
2022/05/25 Python