React-Native底部导航栏实现

版本环境：react-native：0.60.5 react-navigation：4.0
实现需要的第三方库如下：
通过命令行进行安装第三方库并连接
npm install react-navigation --save
npm install react-navigation-tabs --save
npm install react-navigation-stack --save
npm install react-native-gesture-handler --save
react-native link react-native-gesture-handler
npm install react-native-reanimated --save
以及使用react-native的图标库，（网址：https://oblador.github.io/react-native-vector-icons/），需要进行命令行安装连接
npm install react-native-vector-icons --save需要
react-native link react-native-vector-icons

代码实现：
1.需要4个不同的导航页面，页面1代码如下，其他类似，也可自己编写

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class Page1 extends Component {
  render() {
    return (
      <View>
        <Text>This is Page1</Text>
      </View>
    );
  }
}

2路由导航页面编写，导入相应的第三方库

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

将导航的几个页面导入进来

import Page1 from './js/page/Page1';
import Page2 from './js/page/Page2';
import Page3 from './js/page/Page3';
import Page4 from './js/page/Page4';

3.底部导航编写，代码如下

export const BottomTab = createAppContainer(
  createBottomTabNavigator(
    {
      /*Page1路由*/
      Page1: {
        /*Page1页面*/
        screen: Page1,
        /*屏幕导航选项,可以定制导航器显示屏幕的方式（头部标题，选项卡标签等）*/
        navigationOptions: {
          /*导航标签名*/
          tabBarLabel: '页1',
          /*导航呈现的图标*/
          tabBarIcon: ({tintColor, focused}) => (
            /*第三方图标库（图标名称，图标大小，图标样式*/
            <MaterialIcons name={'home'} size={26} style={{color: tintColor}} />
          ),
        },
      },
      Page2: {
        screen: Page2,
        navigationOptions: {
          tabBarLabel: '页2',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'location-on'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
      Page3: {
        screen: Page3,
        navigationOptions: {
          tabBarLabel: '页3',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'assignment'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
      Page4: {
        screen: Page4,
        navigationOptions: {
          tabBarLabel: '页4',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'perm-identity'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
    },
    {
      tabBarOptions: {
        /*设置活动选项卡标签的颜色*/
        activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE',
      },
    },
  ),
);

4.将底部导航栏放进createStackNavigator

const AppRouter = createStackNavigator({
  Home: {
    screen: BottomTab,
    navigationOptions: {
      header: null, //可以通过将header设为null来禁用StackNavigator的Navigation
    },
  },
});

5.将编写好的AppRouter放入createSwitchNavigator后，再用createAppContainer容器包裹并导出

export const AppCreateNavigator = createAppContainer(
  createSwitchNavigator(
    {
      AppRouter: AppRouter,
    },
    {
      initialRouteName: 'AppRouter',
    },
  ),
);

路由页面的完整代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import React, {Component} from 'react';
import {Platform} from 'react-native';
console.disableYellowBox = true; // 关闭全部黄色警告
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Page1 from './js/page/Page1';
import Page2 from './js/page/Page2';
import Page3 from './js/page/Page3';
import Page4 from './js/page/Page4';

export const BottomTab = createAppContainer(
  createBottomTabNavigator(
    {
      /*Page1路由*/
      Page1: {
        /*Page1页面*/
        screen: Page1,
        /*屏幕导航选项,可以定制导航器显示屏幕的方式（头部标题，选项卡标签等）*/
        navigationOptions: {
          /*导航标签名*/
          tabBarLabel: '页1',
          /*导航呈现的图标*/
          tabBarIcon: ({tintColor, focused}) => (
            /*第三方图标库（图标名称，图标大小，图标样式*/
            <MaterialIcons name={'home'} size={26} style={{color: tintColor}} />
          ),
        },
      },
      Page2: {
        screen: Page2,
        navigationOptions: {
          tabBarLabel: '页2',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'location-on'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
      Page3: {
        screen: Page3,
        navigationOptions: {
          tabBarLabel: '页3',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'assignment'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
      Page4: {
        screen: Page4,
        navigationOptions: {
          tabBarLabel: '页4',
          tabBarIcon: ({tintColor, focused}) => (
            <MaterialIcons
              name={'perm-identity'}
              size={26}
              style={{color: tintColor}}
            />
          ),
        },
      },
    },
    {
      tabBarOptions: {
        /*设置活动选项卡标签的颜色*/
        activeTintColor: Platform.OS === 'ios' ? '#06C1AE' : '#06C1AE',
      },
    },
  ),
);

const AppRouter = createStackNavigator({
  Home: {
    screen: BottomTab,
    navigationOptions: {
      header: null, //可以通过将header设为null来禁用StackNavigator的Navigation
    },
  },
});

export const AppCreateNavigator = createAppContainer(
  createSwitchNavigator(
    {
      AppRouter: AppRouter,
    },
    {
      initialRouteName: 'AppRouter',
    },
  ),
);

效果图：

随便写的，希望对你有帮助。