详解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打开新窗口同时关闭旧窗口
Jan 16 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
AngularJS转换响应内容
Jan 27 Javascript
vue之nextTick全面解析
May 17 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
python命令行参数用法实例分析
2019/06/25 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
python实现自动清理重复文件
2020/08/24 Python
基于PyTorch中view的用法说明
2021/03/03 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
2014年中班下学期工作总结
2014/12/11 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python