JS中底部导航栏图面加载于布局显示！！

话不多说先拷贝上源码：

import React from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import Publish from "../pages/Publish";
import My from "../pages/My";
import TopNav from "./TopNav";

const BottomNav = createBottomTabNavigator(
  {
    TopNav: {    //创建底部字段
      screen: TopNav,  
      navigationOptions: {
        title: "帖子"
      }
    },
    Publish: {    //创建底部字段
      screen: Publish,
      navigationOptions: {
        title: "发布"
      }
    },
    My: {    //创建底部字段
      screen: My,
      navigationOptions: {
        title: "我的"
      }
    }
  },   //相对应3个页面展示  可以理解为atblayout对应的页面
  {
    navigationOptions: ({ navigation }) => ({  //使用箭头函数定义点击或未点击图标切换  前提是下载好相对应的开源工具包等
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "TopNav") {
          //切换不同的图标
          iconName = `ios-document${focused ? "" : "-outline"}`;
        } else if (routeName === "Publish") {
          iconName = `ios-create${focused ? "" : "-outline"}`;
        } else if (routeName === "My") {
          iconName = `ios-person${focused ? "" : "-outline"}`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);

export default BottomNav;//对其他页面开发次方法

是不是感觉非常简单呢 是的没错的确很简单 但是使用底部导航必须先下载插件  没有插件是出不来的！！！