知識(shí)點(diǎn)：
1.?createStackNavigator?
2.?createBottomTabNavigator?底部菜單
3.?createMaterialTopTabNavigator?頂部菜單
4.?Icon菜單圖標(biāo) react-native-vector-icons
5.?源代碼地址：https://github.com/ysb002003/ReactNativeLearning_ReactNavigation
效果圖：
代碼實(shí)現(xiàn)：
1.?導(dǎo)入底部與頂部方法到App.js進(jìn)行路由配置
import { createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
2.? 安裝圖標(biāo)組件??https://github.com/oblador/react-native-vector-icons
npm install --save?react-native-vector-icons
3.?導(dǎo)航結(jié)構(gòu)：
4.?文件目錄結(jié)構(gòu)
5.?App.js?路由配置代碼：
a.?根路由代碼：
const App = createStackNavigator({
? WelcomePage: {
? ? screen: WelcomePage,
? ? navigationOptions: {
? ? ? gesturesEnabled: true,//是否可以使用手勢關(guān)閉此屏幕
? ? ? headerTitle: null//去掉 react-navigation提供的標(biāo)題
? ? }
? },
? BottomTab: {
? ? screen: BottomTab,
? ? navigationOptions: {
? ? ? gesturesEnabled: true,
? ? ? headerTitle: null
? ? }
? }
}, {
? ? mode: 'card', //頁面切換模式，左右：card, 上下：modal
? ? headerMode: 'none', //默認(rèn)導(dǎo)航欄：screen漸變棋嘲，float:無透明效果惫霸，none隱藏
? ? transitionConfig: () => ({ //切換動(dòng)畫
? ? ? screenInterpolator: CardStackStyleInterpolator.forHorizontal //水平
? ? })
? });
export default App
b.?底部路由：
const BottomTab = createBottomTabNavigator({
? IndexPage: {
? ? screen: IndexPage,
? ? navigationOptions: {
? ? ? header: null,
? ? ? tabBarLabel: '首頁',
? ? ? tabBarIcon: ({ focused, tintColor }) => (
? ? ??
? ? ? )
? ? }
? },
? CategoryPage: {
? ? screen: CategoryPageTopTab,
? ? navigationOptions: {
? ? ? header: null,
? ? ? tabBarLabel: '分類',
? ? ? tabBarIcon: ({ focused, tintColor }) => (
? ? ? ?
? ? ? )
? ? }
? },
? CartPage: {
? ? screen: CartPage,
? ? navigationOptions: {
? ? ? header: null,
? ? ? tabBarLabel: '購物車',
? ? ? tabBarIcon: ({ focused, tintColor }) => {
? ? ? }
? ? }
? },
? MyPage: {
? ? screen: MyPage,
? ? navigationOptions: {
? ? ? header: null,
? ? ? tabBarLabel: '個(gè)人中心',
? ? ? tabBarIcon: ({ focused, tintColor }) => {
? ? ? }
? ? }
? }
}, {
? ? tabBarOptions: {
? ? ? activeTintColor: theme.primaryColor,
? ? ? inactiveBackgroundColor: theme.lightGray,
? ? }
? });
c.?頂部路由
const CategoryPageTopTab = createMaterialTopTabNavigator({
? CategoryPage: {
? ? screen: CategoryPage,
? ? navigationOptions: {
? ? ? tabBarLabel: '品類'
? ? }
? },
? BrandPage: {
? ? screen: BrandPage,
? ? navigationOptions: {
? ? ? tabBarLabel: '品牌'
? ? }
? }
}, {
? ? swipeEnabled: true, //是否可以左右滑動(dòng)
? ? animationEnabled: true, // 切換頁面時(shí)是否有動(dòng)畫效果
? ? backBehavior: 'none',// 按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁)， none 為不跳轉(zhuǎn)
? ? tabBarOptions: {
? ? ? labelStyle: {
? ? ? },
? ? ? style: {
? ? ? ? height: theme.actionBar.height + theme.barContentPad,
? ? ? ? marginHorizontal: theme.screenWidth / 6,
? ? ? ? paddingTop: theme.barContentPad,
? ? ? ? backgroundColor: '#fff'
? ? ? },
? ? ? tabStyle: {
? ? ? ? width: theme.screenWidth / 3
? ? ? },
? ? ? activeBackgroundColor: '#fff',
? ? ? activeTintColor: theme.primaryColor, //活躍狀態(tài)下前景色
? ? ? inactiveBackgroundColor: '#fff',
? ? ? inactiveTintColor: theme.lightBlack,
? ? ? showIcon: false,
? ? ? showLabel: true,
? ? ? pressOpacity: 0.3,
? ? ? indicatorStyle: {
? ? ? ? height: 2,
? ? ? ? width: theme.screenWidth / 9,
? ? ? ? backgroundColor: theme.primaryColor,
? ? ? ? left: theme.screenWidth / 9
? ? ? }
? ? },
? ? // tabBarComponent: (props) => (
? ? //?
? ? // )
? });
d. theme.js配置文件：
import { Dimensions, Platform } from 'react-native';
export default module = {
? ? screenWidth: Dimensions.get('window').width,
? ? screenHeight: Dimensions.get('window').height,
? ? primaryColor: '#ee0000',
? ? lightGray: '#f5f5f5',
? ? darkGray: '#e5e5e5',
? ? lightBlack: '#333333',
? ? actionBar: {
? ? ? ? height: Platform.OS === 'android' ? 56 : 44,
? ? ? ? backgroundColor: '#fff'
? ? },
? ? barContentPad: (Platform.OS === 'android' ? 0 : 20),
? ? bottomPadding: isIphoneX() ? 18 : 0,
? ? btnActiveOpacity: 0.5
}
export function isIphoneX(){
? ? return false;
}
