React Native顶|底部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。
好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。
本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。
简介
react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:
- 导航 -> StackNavigator
- 底部或者顶部tab -> TabNavigator
- 侧滑 -> DrawerNavigator
我们今天主要讲TabNavigator。
效果展示
实现代码
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;
React Native顶|底部导航使用小技巧相关推荐
- react native 的底部导航栏以及跳转页面带参数
不知不觉又过去了一周,这周依旧是用RN来开发APP,中间遇到很多坑,不过这段时间还是忙,慢慢总结吧,写出一点是一点.写博客除了分享,在开始写之前也是自己对于这段时间学习的总结,重新看代码,理顺思路,这 ...
- [RN] React Native 自定义 底部 弹出 选择框 实现
React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
- Windows Phone开发(8):关于导航的小技巧
原文:Windows Phone开发(8):关于导航的小技巧 前文用几个例子对导航做了简单介绍,在一般应用中,使用上一篇文章中说到的方法,其实也够用了,不过,为了能够处理一些特殊的情况,有几个小技巧还 ...
- React Native 的顶部导航栏和底部导航栏目
说来也是惭愧,本来关于底部导航栏,我已经写过一篇博客,只不过那篇更偏向于入门一些,当时一实现功能之后就迫不及待的分享给大家了.地址在这儿:http://blog.csdn.net/LJFPHP/art ...
- 【React Native】react-navigation导航使用方法
目录 集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...
- 【纯CSS实现底部弧度的小技巧】
底部弧度 很多页面都有底部弧线的设计,用图片的话就要多加载一张图片,有些麻烦.实际只要利用css的after伪类就可以简单的实现弧线,废话不多说,直接上代码 html: <div class=& ...
- native固定吸顶 react_React Native固定底部TextInput,解决键盘遮挡、列表滚动问题
效果图 timer.gif 做类似于微信聊天输入框,可能会遇到下面三个小困扰,记录一下. 目录 # 1.React Native固定底部TextInput # 2.键盘遮挡问题 # 3.列表滚动问题 ...
- 如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
- 使用React Native 和 微信小程序 编写的一款阅读类app ———《轻松一刻》
一款纯React Native原生代码 和 微信小程序 编写的app React Native源码地址:https://github.com/azhon/Time 微信小程序源码地址:https:// ...
最新文章
- 能做pc网页吗_梦幻西游网页版:如今还能抽金伙伴吗?玩家亲自验证,感觉还行...
- GitHub重大好消息:私有仓库可无限制免费创建
- 浅谈Linux磁盘存储管理续【逻辑卷管理(LVM)】
- python能写什么脚本_你用 Python 写过哪些有趣的脚本?
- codesys 串口通讯实例_CODESYS线上直播,解读控制器开发那些事儿(二)
- H2K-一种鲁棒且较佳的花生叶疾病检测和分类方法
- python读音播报-基于python GUI开发的点名小程序(语音播报)
- 马克思知识点总结(一)
- 剑指offer 29 多于一半的数
- mschart走势图 vc_VC++6.0中MsChart控件的用法
- 接口测试——并行上传文件
- 数据存储- 存储文件概述
- 基本算法4.1堆积木详细题解
- 飞机游戏中子弹与飞机的移动与边界源码
- android 获取类对象(代码片段)
- html图片靠右浮动 文字左侧环绕,关于html:将图片浮动到右下角,文字环绕
- 传统算法与神经网络算法,最简单的神经网络算法
- 菜鸟学习OGRE和天龙八部之三: GridInfo和HeightMap文件的数据格式(已更正)
- 李志诉《明日之子》侵权案获赔20万
- 计算机系统在线安装,超详细的电脑装系统教程,手把手教你免费安装,再也不求人...