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

在你的 React Native 項(xiàng)目中安裝react-navigation這個(gè)包
yarn add react-navigation
# or with npm
# npm install react-navigation
然后安裝手勢(shì)控制插件(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(必選)：路由配置對(duì)象是從路由名稱到路由配置的映射，告訴導(dǎo)航器該路由呈現(xiàn)什么
  • BottomTabNavigatorConfig(可選)：配置導(dǎo)航器的路由(如：默認(rèn)首屏，navigationOptions，paths等)樣式(如，轉(zhuǎn)場(chǎng)模式mode、頭部模式等)。
RouteConfigs支持三個(gè)參數(shù)screen、path以及navigationOptions；
  • screen(必選)：指定一個(gè) React 組件作為屏幕的主要顯示內(nèi)容，當(dāng)這個(gè)組件被TabNavigator加載時(shí)，它會(huì)被分配一個(gè)navigation prop。
  • path(可選)：用來設(shè)置支持schema跳轉(zhuǎn)時(shí)使用，具體使用會(huì)在下文的有關(guān)Schema章節(jié)中講到；
  • navigationOptions(可選)：用以配置全局的屏幕導(dǎo)航選項(xiàng)如：title、headerRight、headerLeft等；
BottomTabNavigatorConfig
  • abBarComponent：指定createBottomTabNavigator的TabBar組件，如果不指定在iOS上默認(rèn)使用TabBarBottom，在Android平臺(tái)上默認(rèn)使用TabBarTop。
  • TabBarBottom與TabBarTop都是react-navigation所支持的組件，要自定義TabBar可以重寫這兩個(gè)組件也可以根據(jù)需要自己實(shí)現(xiàn)一個(gè)；
  • tabBarOptions: 配置TaBar下文會(huì)詳細(xì)講解；
  • initialRouteName : 默認(rèn)頁面組件，createBottomTabNavigator顯示的第一個(gè)頁面；
  • order: 定義tab順序的routeNames數(shù)組。
  • paths: 提供routeName到path config的映射，它覆蓋routeConfigs中設(shè)置的路徑。
  • backBehavior: 后退按鈕是否會(huì)導(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è)置單個(gè)tab的樣式；
  • indicatorStyle: 設(shè)置 indicator(tab下面的那條線)的樣式；
  • labelStyle: 設(shè)置TabBar標(biāo)簽的樣式；
  • iconStyle: 設(shè)置圖標(biāo)的樣式；
  • style: 設(shè)置整個(gè)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)航的哪個(gè)頁面
    tabBarOptions: {
      showIcon: true, //是否顯示Icon
      activeTintColor: '#1985EA' //底部選中顏色
    }
  });
//這樣底部的圖標(biāo)也配置完成了

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

# createStackNavigator API

createStackNavigator(RouteConfigs, StackNavigatorConfig):

  • RouteConfigs(必選)：路由配置對(duì)象是從路由名稱到路由配置的映射，告訴導(dǎo)航器該路由呈現(xiàn)什么。
  • StackNavigatorConfig(可選)：配置導(dǎo)航器的路由(如：默認(rèn)首屏，navigationOptions，paths等)樣式(如，轉(zhuǎn)場(chǎng)模式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)行以外的其他頁面

//類似一個(gè)嵌套路由，把底部路由包裹在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的一個(gè)基本路由框架就算基本完成，剩余的就是到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 />
    );
  }
};

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容