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);
上一篇 下一篇

猜你喜欢

热点阅读