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

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

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

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

 简介

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

我们今天主要讲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:

 TabNavigatorConfig

tabBarOptions for （iOS上的默认标签栏）TabBarBottom

tabBarOptions for （Android上的默认标签栏）TabBarTop

小技巧

1.去掉安卓下的下划线，设置：tabBarOptions => indicatorStyle:{ height: 0 }；

2.底部导航在导航最上方添加一条分割线，设置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；

3.导航安卓图标和文字间隙比较大，手动调整小设置：tabBarOptions => labelStyle => margin: 0；