index.js

// 底部tab路由配置
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { APP } from '../../config'

import { Icons } from '../../assets/icons'
import { Home } from '../../views/home'
import Me from '../../views/me'

const Tab = createBottomTabNavigator() // 创建tab栈堆

/** 选项配置函数 */
const tabScreen = props => {
    const route = props.route
    return {
        tabBarIcon: ({color, size}) => {
            switch (route.name) {
                case 'home':
                    return <Icons name="shouye" color={ color } size={ size } />
                case 'me':
                    return <Icons name="qudaoshangguanli" color={ color } size={ size } />
            }
        }
    }
}


const TabRouter: () => React$Node = () => {
    return (
        <Tab.Navigator screenOptions={ tabScreen } tabBarOptions={ APP.tabConfig }>
            <Tab.Screen name="home" component={ Home } />
            <Tab.Screen name="me" component={ Me } />
        </Tab.Navigator>
    )
}

export { TabRouter }