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