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

更新时间：2020-06-05 01:36:01 作者：startmvc

导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别

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