RN底部标签

import React from "react";

import { createBottomTabNavigator } from "react-navigation";

import Ionicons from "react-native-vector-icons/Ionicons";

import My from "../pages/My";//页面2

import Publish from "../pages/Publish";//页面3

 

import TioNav from "./TioNav";//页面1

const BottomNav = createBottomTabNavigator(

{

TioNav: {

screen: TioNav,//调用页面

navigationOptions: {

title: "帖子"

}//其中一个标签的写法

},

Publish: {

screen: Publish,

navigationOptions: {

title: "发布"

}

},

My: {

screen: My,

navigationOptions: {

title: "我的"

}

}

},

{

navigationOptions: ({ navigation }) => ({

tabBarIcon: ({ focused, tintColor }) => {

const { routeName } = navigation.state;

let iconName;

if (routeName === "TioNav") {

//切换不同的图标

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;