React Navigation 4.x Tabbar

安装

4.x 版本从 react-navigation 中移除了各类导航器，同时还依赖了一些其他的包需要手动安装。

npm install react-navigation react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

安装一下 StackNavigator 和 BottomTabNavigator
npm install react-navigation-stack @react-native-community/masked-view react-navigation-tabs

Tabbar

const HomeTabSelectedIcon = require("./../assets/tabar/home.png");
const HomeTabUnSelectedIcon = require("./../assets/tabar/unhome.png");
const CartTabSelectedIcon = require("./../assets/tabar/cart.png");
const CartTabUnSelectedIcon = require("./../assets/tabar/uncart.png");
const MyTabSelectedIcon = require("./../assets/tabar/my.png");
const MyTabUnSelectedIcon = require("./../assets/tabar/unmy.png");


const TabNavigator = createBottomTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon:(({tintColor,focused}) => {
                    return(
                        <Image 
                            source={focused ? HomeTabSelectedIcon : HomeTabUnSelectedIcon}
                            style={styles.tabbarImage} 
                        />
                    )
                }),
            },
        },
        Cart: {
            screen: Cart,
            navigationOptions: {
                tabBarLabel: '购物车',
                tabBarIcon:(({tintColor,focused}) => {
                    return(
                        <Image 
                            source={focused ? CartTabSelectedIcon : CartTabUnSelectedIcon}
                            style={styles.tabbarImage} 
                        />
                    )
                }),
            },
        },
        User: {
            screen: User,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon:(({tintColor,focused}) => {
                    return(
                        <Image 
                            source={focused ? MyTabSelectedIcon : MyTabUnSelectedIcon}
                            style={styles.tabbarImage} 
                        />
                    )
                }),
            },
        },
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
            // tabBarIcon: ({focused, tintColor}) =>
            //     getTabBarIcon(navigation, focused, tintColor),
        }),
        tabBarOptions: {
            activeTintColor: '#333333',
            inactiveTintColor: '#333333',
        },
    }
);