react-navigation路由常用配置及使用方法

在你的 React Native 項(xiàng)目中安裝react-navigation這個包

yarn add react-navigation
# or with npm
# npm install react-navigation

然后安裝手勢控制插件(0.59>版本<0.60 )的建議安裝 1.1.3

yarn add react-native-gesture-handler 
# or with npm
# npm install react-native-gesture-handler

然后連接到原聲庫

react-native link react-native-gesture-handler

插件安裝好，接下來就是了解下如何使用了

react-navigation主要用到的是三種形式的路由創(chuàng)建硕盹，以及路由的嵌套

import {
  createBottomTabNavigator, // =>創(chuàng)建底部導(dǎo)航
  createStackNavigator, // =>創(chuàng)建通用頁面路由
  createDrawerNavigator // => 創(chuàng)建側(cè)面打開(抽屜式)路由
} from 'react-navigation'

創(chuàng)建底部路由

createBottomTabNavigator API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

RouteConfigs(必選)：路由配置對象是從路由名稱到路由配置的映射倒彰，告訴導(dǎo)航器該路由呈現(xiàn)什么

BottomTabNavigatorConfig(可選)：配置導(dǎo)航器的路由(如：默認(rèn)首屏，navigationOptions莱睁，paths等)樣式(如待讳，轉(zhuǎn)場模式mode、頭部模式等)仰剿。

RouteConfigs支持三個參數(shù)screen创淡、path以及navigationOptions；

screen(必選)：指定一個 React 組件作為屏幕的主要顯示內(nèi)容南吮，當(dāng)這個組件被TabNavigator加載時琳彩，它會被分配一個navigation prop。

path(可選)：用來設(shè)置支持schema跳轉(zhuǎn)時使用部凑，具體使用會在下文的有關(guān)Schema章節(jié)中講到露乏；

navigationOptions(可選)：用以配置全局的屏幕導(dǎo)航選項(xiàng)如：title、headerRight涂邀、headerLeft等瘟仿；

BottomTabNavigatorConfig

abBarComponent：指定createBottomTabNavigator的TabBar組件，如果不指定在iOS上默認(rèn)使用TabBarBottom比勉，在Android平臺上默認(rèn)使用TabBarTop劳较。

TabBarBottom與TabBarTop都是react-navigation所支持的組件，要自定義TabBar可以重寫這兩個組件也可以根據(jù)需要自己實(shí)現(xiàn)一個浩聋；

tabBarOptions: 配置TaBar下文會詳細(xì)講解观蜗；

initialRouteName : 默認(rèn)頁面組件，createBottomTabNavigator顯示的第一個頁面衣洁；

order: 定義tab順序的routeNames數(shù)組墓捻。

paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設(shè)置的路徑坊夫。

backBehavior: 后退按鈕是否會導(dǎo)致標(biāo)簽切換到初始tab砖第？如果是撤卢，則設(shè)切換到初始tab，否則什么也不做厂画。默認(rèn)為切換到初始tab凸丸。

tabBarOptions（tab配置）

activeTintColor: 設(shè)置TabBar選中狀態(tài)下的標(biāo)簽和圖標(biāo)的顏色；

inactiveTintColor: 設(shè)置TabBar非選中狀態(tài)下的標(biāo)簽和圖標(biāo)的顏色袱院；

showIcon: 是否展示圖標(biāo)屎慢，默認(rèn)是false；

showLabel: 是否展示標(biāo)簽忽洛，默認(rèn)是true腻惠；

upperCaseLabel - 是否使標(biāo)簽大寫，默認(rèn)為true欲虚。

tabStyle: 設(shè)置單個tab的樣式集灌；

indicatorStyle: 設(shè)置 indicator(tab下面的那條線)的樣式；

labelStyle: 設(shè)置TabBar標(biāo)簽的樣式复哆；

iconStyle: 設(shè)置圖標(biāo)的樣式欣喧；

style: 設(shè)置整個TabBar的樣式；

allowFontScaling: 設(shè)置TabBar標(biāo)簽是否支持縮放梯找，默認(rèn)支持唆阿；

safeAreaInset：覆蓋的forceInset prop，默認(rèn)是{ bottom: 'always', top: 'never' }锈锤，可選值：top | bottom | left | right ('always' | 'never')驯鳖；

//BottomTabBar.js
import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from './Index'; //底部菜單頁面地址
import System from './System';  //底部菜單頁面地址
import Mine from './Mine'; //底部菜單頁面地址

export default BottomNavigator = createBottomTabNavigator({
  Index:{
    screen:Index 
  },
  System :{
    screen:System 
  },
  Mine :{
    screen:Mine 
  }
});
//這樣最基本的底部路由就創(chuàng)建好了

//App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation'; //路由容器實(shí)例化方法
import BottomTabBar from './BottomTabBar';
const Navigator = createAppContainer(BottomTabBar );

//基本路由就算完成
export default class App extends Component {
  render() {
    return (
         <Navigator />
    );
  }
};

底部導(dǎo)航添加圖標(biāo)

//BottomTabBar.js
import React, { Component } from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Index from './Index'; //底部菜單頁面地址
import System from './System';  //底部菜單頁面地址
import Mine from './Mine'; //底部菜單頁面地址

//路由所需要用到的圖片，選中跟未選中
const IndexSelected = require("../assets/icon/index_fous.png");
const IndexIcon = require("../assets/icon/index.png");
const SystemSelected = require("../assets/icon/quanzi_fous.png");
const SystemIcon = require("../assets/icon/quanzi.png");
const MineSelected = require("../assets/icon/zixun_fous.png");
const MineIcon = require("../assets/icon/zixun.png");

export default BottomNavigator = createBottomTabNavigator({
  Index: {
    screen: Index,
    navigationOptions: () => ({
      title: '首頁',
      tabBarIcon: (({ focused }) => {
        return (
          <Image
            source={focused ? IndexSelected : IndexIcon}
            style={styles.tabbarImage}
          />
        )
      }),
    })
  },
  System: {
    screen: Information,
    navigationOptions: () => ({
      title: '系統(tǒng)',
      tabBarIcon: (({ focused }) => {
        return (
          <Image
            source={focused ? SystemSelected : SystemIcon}
            style={styles.tabbarImage}
          />
        )
      }),
    })
  },
  Mine: {
    screen: AddressList,
    navigationOptions: () => ({
      title: '我的',
      tabBarIcon: (({ focused }) => {
        return (
          <Image
            source={focused ? MineSelected : MineIcon}
            style={styles.tabbarImage}
          />
        )
      }),
    })
  }
},
  {
    initialRouteName: 'Index', //默認(rèn)顯示底部導(dǎo)航的哪個頁面
    tabBarOptions: {
      showIcon: true, //是否顯示Icon
      activeTintColor: '#1985EA' //底部選中顏色
    }
  });
//這樣底部的圖標(biāo)也配置完成了

BottomNavigator.navigationOptions = ({navigation})=>{
  //如果我們要對底部導(dǎo)航進(jìn)行一些動態(tài)的配置久免，我們可以這樣操作
  //BottomNavigator是當(dāng)前我們默認(rèn)導(dǎo)出的component
  //navigation里面我們可以得到當(dāng)前路由的名稱等等之類的一些東西
  //然后我們可以根據(jù)navigation里面拿到的東西進(jìn)行判斷浅辙，以獲得不同頁面不同的展示效果
  //最后return
  return {
  //你要返回的東西
  }
}

一個App不可能只有底部路由，還有其他頁面阎姥，所以我們還會用到

# createStackNavigator API

createStackNavigator(RouteConfigs, StackNavigatorConfig):

RouteConfigs(必選)：路由配置對象是從路由名稱到路由配置的映射记舆，告訴導(dǎo)航器該路由呈現(xiàn)什么。

StackNavigatorConfig(可選)：配置導(dǎo)航器的路由(如：默認(rèn)首屏丁寄，navigationOptions氨淌，paths等)樣式(如，轉(zhuǎn)場模式mode伊磺、頭部模式等)。

具體配置跟上面創(chuàng)建的大體差不多删咱，也可以點(diǎn)擊鏈接查看具體配置

//StackNavigator.js
import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import BottomNavigator' from ./BottomNavigator';
import Detail' from ./Detail'; // =>除底部當(dāng)行以外的其他頁面
import Person' from ./Person'; // =>除底部當(dāng)行以外的其他頁面

//類似一個嵌套路由屑埋，把底部路由包裹在Stack中
export default StackNavigator = createStackNavigator({
  BottomNavigator:{
    screen:BottomNavigator
  }
},
Detail:{
    screen:Detail
  }
},
Person:{
    screen:Person
  }
},
  {
    initialRouteName: 'BottomNavigator', //默認(rèn)顯示底部路由
    defaultNavigationOptions: { // =>默認(rèn)的路由全局樣式配置
      // headerBackImage: <BackImage />, //=>自定義返回按鈕
      headerStyle: {
        backgroundColor: '#1985EA',
        elevation: 0.5
      },
      headerTitleStyle: {
        color: '#fff',
        // textAlign: "center", //用于android 機(jī)型標(biāo)題居中顯示
        // flex: 1
      },
    }
  }
)；
//這樣我們App的一個基本路由框架就算基本完成痰滋，剩余的就是到App.js文件摘能，把之前實(shí)例化的路由更改下就OK

更改實(shí)例化的createAppContainer

//App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation'; //路由容器實(shí)例化方法
import BottomTabBar from './BottomTabBar';
import StackNavigator'./StackNavigator';

//const Navigator = createAppContainer(BottomTabBar );
const Navigator = createAppContainer(StackNavigator); 替換為
//基本路由就算完成
export default class App extends Component {
  render() {
    return (
         <Navigator />
    );
  }
};

記錄下使用的心得续崖，方便以后使用查看，如有寫都不對的歡迎指正