React Native顶-底部导航使用小技巧

前端之家收集整理的这篇文章主要介绍了React Native顶-底部导航使用小技巧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。

本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。

简介

react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:

  • 导航 -> StackNavigator
  • 底部或者顶部tab -> TabNavigator
  • 侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

效果展示

实现代码

  1. import React,{ Component } from 'react';
  2. import {
  3. AppRegistry,StyleSheet,Button,Text,View,Image,StatusBar
  4. } from 'react-native';
  5. import { StackNavigator,TabBarBottom,TabNavigator } from "react-navigation";
  6. class Home extends React.Component {
  7. static navigationOptions = {
  8. tabBarLabel: '热点',tabBarIcon: ({ focused,tintColor }) => (
  9. <Image
  10. source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
  11. style={{ width: 26,height: 26,tintColor: tintColor }}
  12. />
  13. )
  14. };
  15. render() {
  16. return (
  17. <View style={styles.container}>
  18. <Text>!这是热点</Text>
  19. </View>
  20. );
  21. }
  22. }
  23. class Circle extends React.Component {
  24. static navigationOptions = {
  25. tabBarLabel: '圈子',tintColor }) => (
  26. <Image
  27. source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
  28. style={{ width: 26,tintColor: tintColor }}
  29. />
  30. )
  31. };
  32. render() {
  33. return (
  34. <View style={styles.container}>
  35. <Text>!这是圈子</Text>
  36. </View>
  37. );
  38. }
  39. }
  40. class Tools extends React.Component {
  41. static navigationOptions = {
  42. tabBarLabel: '工具',tintColor }) => (
  43. <Image
  44. source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
  45. style={{ width: 26,tintColor: tintColor }}
  46. />
  47. )
  48. };
  49. render() {
  50. return (
  51. <View style={styles.container}>
  52. <Text>!这是工具</Text>
  53. </View>
  54. );
  55. }
  56. }
  57. class Mypage extends React.Component {
  58. static navigationOptions = {
  59. tabBarLabel: '我的',tintColor }) => (
  60. <Image
  61. source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
  62. style={{ width: 26,tintColor: tintColor }}
  63. />
  64. )
  65. };
  66. render() {
  67. return (
  68. <View style={styles.container}>
  69. <Text>!这是我的</Text>
  70. </View>
  71. );
  72. }
  73. }
  74. const styles = StyleSheet.create({
  75. container: {
  76. flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',}
  77. });
  78. const MyApp = TabNavigator(
  79. {
  80. Home: {
  81. screen: Home,},Circle: {
  82. screen: Circle,Tools: {
  83. screen: Tools,Mypage: {
  84. screen: Mypage,{
  85. tabBarOptions: {
  86. activeTintColor: '#4BC1D2',inactiveTintColor: '#000',showIcon: true,showLabel: true,upperCaseLabel: false,pressColor: '#823453',pressOpacity: 0.8,style: {
  87. backgroundColor: '#fff',paddingBottom: 0,borderTopWidth: 0.5,borderTopColor: '#ccc',labelStyle: {
  88. fontSize: 12,margin: 1
  89. },indicatorStyle: { height: 0 },//android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
  90. },tabBarPosition: 'bottom',swipeEnabled: false,animationEnabled: false,lazy: true,backBehavior: 'none',});
  91. module.exports = MyApp;

配置说明

NavigationOptions@H_301_207@
当然,通过NavigationOptions来配置我们的tabBarItem:
title - 标题
tabBarVisible - 是否可见
tabBarIcon - 配置图片,当然,完全可以不使用图片
tabBarLabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题

TabNavigatorConfig @H_301_207@
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 @H_301_207@
activeTintColor - 活动标签标签和图标颜色
activeBackgroundColor - 活动选项卡的背景颜色
inactiveTintColor - 非活动标签标签和图标颜色
inactiveBackgroundColor - 非活动标签的背景颜色
showLabel - 是否显示标签标签,默认为true
style - 标签栏的样式对象
labelStyle - 标签标签的样式对象
tabStyle - 标签的样式对象


tabBarOptions for (Android上的默认标签栏)TabBarTop@H_301_207@
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相关文章