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', }, } );