详解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 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 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获取数组中重复数据的两种方法
2013/06/28 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
关于php开启错误提示的总结
2019/09/24 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
$.format,jquery.format 使用说明
2011/07/13 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js性能优化技巧
2015/11/29 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
setTimeout时间设置为0详细解析
2018/03/13 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
谈谈Python中的while循环语句
2019/03/10 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
浅谈Python中的字符串
2020/06/10 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
给民警的表扬信
2014/01/08 职场文书
幼教简历自我评价
2014/01/28 职场文书
运动会入场解说词
2014/02/07 职场文书
安全生产月活动总结
2014/05/04 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
详细总结Python常见的安全问题
2021/05/21 Python