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;
RN底部标签
最新推荐文章于 2022-06-23 19:23:52 发布