详解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 Event学习补遗 addEventSimple
Feb 11 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS提交form表单实例分析
Dec 10 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 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新手上路(八)
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
js函数般调用正则
2008/04/08 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
学习vue.js计算属性
2016/12/03 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
python中多个装饰器的执行顺序详解
2018/10/08 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python tkinter模版代码实例
2020/02/05 Python
python中如何打包用户自定义模块
2020/09/23 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
效能监察建议书
2014/05/19 职场文书
读书月活动方案
2014/05/22 职场文书
公司总经理任命书
2014/06/05 职场文书
上课不认真检讨书
2014/09/17 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
师德师风学习材料
2014/12/19 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
MySQL的存储过程和相关函数
2022/04/26 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL