//在com包下新建一个BottomTabNav.js
//然后新建Publish,My文件用于底部切换
import ToTabNav from "./ToTabNav"; //加入顶部切换的引用
import Publish from "../util/Publish";
import My from "../util/My";
yarn add react-native-vector-icons//图片插件
import Ionicons from "react-native-vector-icons/Ionicons";//图片引用
const BottomTabNav = createBottomTabNavigator(
{
//ToTabNav是顶部的切换条的导航栏
ToTabNav: {
screen: ToTabNav,
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 === "ToTabNav") {
//切换不同的图标
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 BottomTabNav;
网友评论