import { createBottomTabNavigator } from ‘react-navigation’
createBottomTabNavigator 创建底部切换的tab>

完整代码 https://github.com/withwz/RN-boilerplate/tree/master/App/Containers/ListViewTaste/FooterNav
配置看程序和注释

效果

image.png

程序目录结构

image.png

// footer.js

  2. /**
  3.  *
  4.  * @see https://blog.csdn.net/zcmain/article/details/89019747
  5.  *
  6.  */
  7. import React from 'react'
  8. import { Image } from 'react-native';
  9. import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
  10. import Page1 from '../pages/Page1'
  11. import Page2 from '../pages/Page2'
  12. import Page3 from '../pages/Page3'
  13. /**
  14.  * 底部标签导航
  15.  */
  16. const bottomNavigator = createBottomTabNavigator(
  17.   /**
  18.    * RouteConfigs
  19.    */
  20.   {
  21.     //路由页面1
  22.     bottomPage1: {
  23.       screen: Page1,
  24.       navigationOptions: {
  25.         tabBarLabel: 'pageone',
  26.         tabBarIcon: ({ focused }) => (
  27.           <Image
  28.             style={{ width: 22, height: 22 }}
  29.             source={focused
  30.               ? require('../../../../Assets/bottomFooter/home.png')
  31.               : require('../../../../Assets/bottomFooter/home-green.png')
  32.             }>
  33.           </Image>
  34.         ),
  35.       }
  36.     },
  37.     //路由页面2
  38.     bottomPage2: {
  39.       screen: Page2,
  40.       navigationOptions: {
  41.         tabBarLabel: 'pagetwo',
  42.         tabBarIcon: ({ focused }) => (
  43.           <Image
  44.             style={{ width: 22, height: 22 }}
  45.             source={focused
  46.               ? require('../../../../Assets/bottomFooter/type.png')
  47.               : require('../../../../Assets/bottomFooter/type-green.png')
  48.             }>
  49.           </Image>
  50.         ),
  51.       }
  52.     },
  53.     //路由页面3
  54.     bottomPage3: {
  55.       screen: Page3,
  56.       navigationOptions: {
  57.         tabBarLabel: 'pagethree',
  58.         tabBarIcon: ({ focused }) => (
  59.           <Image
  60.             style={{ width: 22, height: 22 }}
  61.             source={focused
  62.               ? require('../../../../Assets/bottomFooter/my.png')
  63.               : require('../../../../Assets/bottomFooter/my-green.png')
  64.             }>
  65.           </Image>
  66.         ),
  67.       }
  68.     },
  69.   },
  70.   /**
  71.    * BottomTabNavigatorConfig
  72.    */
  73.   {
  74.     // andorid按下返回键将返回initalRouteName，如果设置非initalRouteName则直接结束标签导航
  75.     backBehavior: 'none',
  76.     // 设置首次加载的页面默认为RouteConfig中第一个(指定的必须为Routeonfig中定义的路由页面)
  77.     //initialRouteName: 'bottomPage3',
  78.     // 定义tab顺序的routeNames数组
  79.     //order: ['bottomPage1', 'bottomPage2', 'bottomPage3'],
  80.     //导航栏选项
  81.     tabBarOptions: {
  82.       //设置是否显示tab上图标
  83.       showIcon: true,
  84.       //设置tab激活时文字和图标(前提是tabBarIcon的style设置tintColor)颜色
  85.       activeTintColor: '#fd742f',
  86.       //设置tab未激活文字和图标(前提是tabBarIcon的style设置tintColor)颜色
  87.       inactiveTintColor: '#a6a1aa',
  88.       //设置tab激活时候背景颜色
  89.       activeBackgroundColor: '#e0dce0',
  90.       //设置整个tabbar的样式(背景颜色、高等（ height: 55）)
  91.       style: { backgroundColor: '#f5f4f9', height: 55 },
  92.       //设置tab上文字样式(可设置字体大小等、内边距等)
  93.       labelStyle: { fontSize: 16 },
  94.       // 设置单个tab样式
  95.       //tabStyle:{backgroundColor:'#9524d3',},
  96.       // 设置是否显示tab文字
  97.       //showLabel: true,
  98.       // 设置tab未激活时候背景颜色
  99.       //inactiveBackgroundColor:'#a4d9ff',
  100.     },
  101.   });
  103. const bottomAppContainer = createAppContainer(bottomNavigator);
  104. export default bottomAppContainer;

// route.js

import {
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

// import Welcome from '../WelcomeComponent'
// import TopNavigator from './TopNavigatorComponent'
import BottomNavigator from './footer'
/**
* 栈式导航
*/
const stackNavigator = createStackNavigator(
  //除了底部footer的配置还可以指定要加载的RN组件
  {
      // welcomePage: {
      //     screen: Welcome,
      // },
      // topNavigatorPage: {
      //     screen: TopNavigator,
      //     navigationOptions: () => ({
      //         header: null,
      //     })
      // },
      bottomNavigatorPage: {
          screen: BottomNavigator,
          navigationOptions: ({}) => ({
              header: null,
          })
      }
  }
);
const appStackNavigator = createAppContainer(stackNavigator);
export default appStackNavigator;

参考

https://blog.csdn.net/zcmain/article/details/89019747