详解React Native顶|底部导航使用小技巧

2019-11-19 15:27:11

字体：大中小

来源：转载

供稿：网友

导航一直是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