react-native-tabs看这个吧
2019-10-24 本文已影响0人
coffee1949
import React from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import GameScreen from '../screens/game'
import GiftScreen from '../screens/gift'
import ShopScreen from '../screens/shop'
import InfoScreen from '../screens/info'
import MineScreen from '../screens/mine'
const TABS = {
Game: {
screen: GameScreen,
navigationOptions: {
tabBarLabel: '游戏',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name='logo-game-controller-b' size={25} color={tintColor} />
)
}
},
Gift: {
screen: GiftScreen,
navigationOptions: {
tabBarLabel: '礼包',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name='ios-gift' size={25} color={tintColor} />
)
}
},
Shop: {
screen: ShopScreen,
navigationOptions: {
tabBarLabel: '商城',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name='ios-cart' size={25} color={tintColor} />
)
}
},
Info: {
screen: InfoScreen,
navigationOptions: {
tabBarLabel: '资讯',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name='ios-list-box' size={25} color={tintColor} />
)
}
},
Mine: {
screen: MineScreen,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({tintColor,focused}) => (
<Ionicons name='ios-person' size={25} color={tintColor} />
)
}
},
}
let { Game, Gift, Shop, Info, Mine } = TABS
const tabs = { Game, Info, Mine }
const TabNavigator = createBottomTabNavigator(tabs, {
tabBarOptions: {
activeTintColor: '#e54d42',
inactiveTintColor: '#666666',
},
initialRouteName: 'Info'
});
export default createAppContainer(TabNavigator);