import React from "react";
import Ionicons from "react-native-vector-icons/Ionicons";
import { createBottomTabNavigator } from "react-navigation";
import Home from "./Home";
import Details from "./Details";
import Route2 from "../src2/Reoute2";
const Route = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
title: "首页"
}
},
Route2: {
screen: Route2,
navigationOptions: {
title: "消息"
}
},
Details: {
screen: Details,
navigationOptions: {
title: "我的"
}
}
},
{
//谁设置文本选中前后效果颜色
tabBarOptions: {
activeTintColor: "#FF0000", //激活文本图片样式
inactiveTintColor: "#0000FF", //未激活文本图片样式
activeBackgroundColor: "#2296F3", //激活背景样式
inactiveBackgroundColor: "#ffffff" //未激活背景样式
},
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === "Home") {
//切换不同的图标
//iconName = `ios-document${focused ? "" : "-outline"}`;
//iconName = `${focused ? "ios-document" : "ios-document-outline"}`;
iconName = "ios-document";
} else if (routeName === "Route2") {
iconName = "ios-create";
} else if (routeName === "Details") {
iconName = "ios-person";
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
}
})
}
);
export default Route;
