一、開源庫介紹

今年1月份，新開源的React-natvigation庫備受矚目。在短短不到3個月的時間，github上星數已達4000+。Fb推薦使用庫，並且在React Native當前最新版本0.44中將Navigator刪除。react-navigation據稱有原生般的效能體驗效果。可能會成為未來React Native導航元件的主流軍。本篇內容基於【 ^1.0.0-beta.9 】版本來介紹關於該庫的使用和實戰技巧。可以看到，雖然是beta版本，不過基本穩定，大家可放心在專案中使用。該庫包含三類元件：

（1）StackNavigator：用來跳轉頁面和傳遞引數

（2）TabNavigator：類似底部導航欄，用來在同一螢幕下切換不同介面

（3）DrawerNavigator：側滑選單導航欄，用於輕鬆設定帶抽屜導航的螢幕

二、react-navigation使用

具體內容大致分為如下：

（1）react-navigation庫屬性介紹

（2）StackNavigator、TabNavigator實現介面間跳轉，Tab切換

（3）StackNavigator介面間跳轉、傳值、取值

（4）DrawerNavigator實現抽屜導航選單

（5）DrawerNavigator擴充套件功能

（6）修改原始碼，定製UI介面

1、StackNavigator屬性介紹

navigationOptions：配置StackNavigator的一些屬性。
title：標題，如果設定了這個導航欄和標籤欄的title就會變成一樣的，不推薦使用
header：可以設定一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設定為null
headerTitle：設定導航欄標題，推薦
headerBackTitle：設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題。可以自定義，也可以設定為null
headerTruncatedBackTitle：設定當上個頁面標題不符合返回箭頭後的文字時，預設改成"返回"
headerRight：設定導航條右側。可以是按鈕或者其他檢視控制元件
headerLeft：設定導航條左側。可以是按鈕或者其他檢視控制元件
headerStyle：設定導航條的樣式。背景色，寬高等
headerTitleStyle：設定導航欄文字樣式
headerBackTitleStyle：設定導航欄‘返回’文字樣式
headerTintColor：設定導航欄顏色
headerPressColorAndroid：安卓獨有的設定顏色紋理，需要安卓版本大於5.0
gesturesEnabled：是否支援滑動返回手勢，iOS預設支援，安卓預設關閉
screen：對應介面名稱，需要填入import之後的頁面
mode：定義跳轉風格
card：使用iOS和安卓預設的風格
modal：iOS獨有的使螢幕從底部畫出。類似iOS的present效果
headerMode：返回上級頁面時動畫效果
float：iOS預設的效果
screen：滑動過程中，整個頁面都會返回
none：無動畫
cardStyle：自定義設定跳轉效果
transitionConfig：自定義設定滑動返回的配置
onTransitionStart：當轉換動畫即將開始時被呼叫的功能
onTransitionEnd：當轉換動畫完成，將被呼叫的功能
path：路由中設定的路徑的覆蓋對映配置
initialRouteName：設定預設的頁面元件，必須是上面已註冊的頁面元件
initialRouteParams：初始路由引數

注：大家可能對於path不太理解。path屬性適用於其他app或瀏覽器使用url開啟本app並進入指定頁面。path屬性用於宣告一個介面路徑，例如：【/pages/Home】。此時我們可以在手機瀏覽器中輸入：app名稱://pages/Home來啟動該App，並進入Home介面。

2、TabNavigator屬性介紹

screen：和導航的功能是一樣的，對應介面名稱，可以在其他頁面通過這個screen傳值和跳轉。
navigationOptions：配置TabNavigator的一些屬性
title：標題，會同時設定導航條和標籤欄的title
tabBarVisible：是否隱藏標籤欄。預設不隱藏(true)
tabBarIcon：設定標籤欄的圖示。需要給每個都設定
tabBarLabel：設定標籤欄的title。推薦
導航欄配置
tabBarPosition：設定tabbar的位置，iOS預設在底部，安卓預設在頂部。（屬性值：'top'，'bottom'）
swipeEnabled：是否允許在標籤之間進行滑動
animationEnabled：是否在更改標籤時顯示動畫
lazy：是否根據需要懶惰呈現標籤，而不是提前，意思是在app開啟的時候將底部標籤欄全部載入，預設false,推薦為true
trueinitialRouteName：設定預設的頁面元件
backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉
tabBarOptions：配置標籤欄的一些屬性iOS屬性
activeTintColor：label和icon的前景色活躍狀態下
activeBackgroundColor：label和icon的背景色活躍狀態下
inactiveTintColor：label和icon的前景色不活躍狀態下
inactiveBackgroundColor：label和icon的背景色不活躍狀態下
showLabel：是否顯示label，預設開啟 style：tabbar的樣式
labelStyle：label的樣式安卓屬性
activeTintColor：label和icon的前景色活躍狀態下
inactiveTintColor：label和icon的前景色不活躍狀態下
showIcon：是否顯示圖示，預設關閉
showLabel：是否顯示label，預設開啟 style：tabbar的樣式
labelStyle：label的樣式 upperCaseLabel：是否使標籤大寫，預設為true
pressColor：material漣漪效果的顏色（安卓版本需要大於5.0）
pressOpacity：按壓標籤的透明度變化（安卓版本需要小於5.0）
scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式
indicatorStyle：標籤指示器的樣式物件（選項卡底部的行）。安卓底部會多出一條線，可以將height設定為0來暫時解決這個問題
labelStyle：label的樣式
iconStyle：圖示樣式

3、DrawerNavigator屬性介紹

DrawerNavigatorConfig
drawerWidth - 抽屜的寬度
drawerPosition - 選項是左或右。預設為左側位置
contentComponent - 用於呈現抽屜內容的元件，例如導航項。接收抽屜的導航。預設為DrawerItems
contentOptions - 配置抽屜內容
initialRouteName - 初始路由的routeName
order - 定義抽屜專案順序的routeNames陣列。
路徑 - 提供routeName到路徑配置的對映，它覆蓋routeConfigs中設定的路徑。
backBehavior - 後退按鈕是否會切換到初始路由？如果是，設定為initialRoute，否則為none。預設為initialRoute行為
DrawerItems的contentOptions屬性
activeTintColor - 活動標籤的標籤和圖示顏色
activeBackgroundColor - 活動標籤的背景顏色
inactiveTintColor - 非活動標籤的標籤和圖示顏色
inactiveBackgroundColor - 非活動標籤的背景顏色
內容部分的樣式樣式物件
labelStyle - 當您的標籤是字串時，要覆蓋內容部分中的文字樣式的樣式物件

從上述中大致瞭解了react-navigation三種元件的一些基本屬性，所以到我們甩起袖子擼程式碼見證下奇蹟了。

4、使用StackNavigator + TabNavigator實現Tab介面切換、介面間導航

API定義：StackNavigator(RouteConfigs, StackNavigatorConfig)、TabNavigator(RouteConfigs, TabNavigatorConfig)

（1）整合 react-navigation：在終端執行【 npm install react-navigation --save 】

（2）介面中匯入必要元件：

import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';

（3）定義TabNavigator：

const Tab = TabNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:({navigation}) => ({
tabBarLabel:'首頁',
tabBarIcon:({focused,tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./imgs/[email protected]')}
selectedImage={require('./imgs/[email protected]')}
/>
)
}),
},
Mine:{
screen:MineScreen,
navigationOptions:({navigation}) => ({
tabBarLabel:'我',
tabBarIcon:({focused,tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./imgs/[email protected]')}
selectedImage={require('./imgs/[email protected]')}
/>
)
}),
},
},
{
tabBarComponent:TabBarBottom,
tabBarPosition:'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions:{
activeTintColor:'#06c1ae',
inactiveTintColor:'#979797',
style:{backgroundColor:'#ffffff',},
labelStyle: {
fontSize: 20, // 文字大小
},
}
相關推薦

React Native未來導航者：react-navigation 使用詳解（基礎篇）

剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流！上

React Native未來導航者：react-navigation 使用詳解

上篇部落格和大家分享了關於React Native jsBundle預載入，介面啟動優化的內容，詳情可點選：轉自：http://blog.csdn.net/u013718120/article/details/72357698 一、開源庫介紹

React Native未來導航者：react-navigation 使用詳解（進階篇）

剛建立的React Native 微信公眾號，歡迎微信掃描關注訂閱號，每天定期會分享react native 技術文章，移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入交流！

react native 中textInput的value屬性詳解

hold eric 工作 als size 保持 chang 無奈 bsp TextInput用法就不多講了，主要記錄下遇到的一個怪問題。背景：項目需要開發一個充值頁面，需要一個輸入框，然後幾個按鈕，輸入框是允許用戶自己輸入任意金額，按鈕是可以讓用戶快捷選擇金

React 與 React Native 底層共識：React 是什麼

此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結合學習的方法，此小節主要介紹 React 的底層原理與機制。目前 React 可以說是前端世界最火熱的框架，具有高效能以及容易上手的特性，而且在掌握了 Reac

react-native技術調研：react-native是什麼？

如有疏漏錯誤，還望指正。轉載不忘加上>>原連結<<哦~ react-native是什麼？ react-native原理從字面意思上來看，react-native由單詞react和單詞native組合而成，中間一個連字元連線。我們對其中的nativ

React-Native 元件之 Modal的使用詳解

Modal元件可以用來覆蓋包含React Native根檢視的原生檢視（如UIViewController，Activity），用它可以實現遮罩的效果。屬性 Modal提供的屬性有： animationType（動畫型別） PropTypes.oneOf([‘none’, ‘slide’, ‘fade’]

【React Native開發】React Native控制元件之RefreshControl元件詳解(21)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一下RefreshControl下拉重新整理元件講解以及使用例項剛建立的React Native技術交

React Native和原生app通訊機制詳解

概述 React Native用iOS自帶的JavaScriptCore作為JS的解析引擎，但並沒有用到JavaScriptCore提供的一些可以讓JS與OC互調的特性，而是自己實現了一套機制，這套機制可以通用於所有JS引擎上，在沒有JavaScriptCor

解決React Native報錯：Navigator is deprecated and has been removed from this package.

報錯如下： Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react

react-native react-navigation的用法 react native 導航路由元件react-navigation的使用

一、問題背景 react-navigation是react-native官方推薦的，基於Javascript的可擴充套件且使用簡單的導航，功能強大且完備回顧一下，react-navigation包含以下功能來幫助我們建立導航器: StackN

解決React Native報錯：Cannot read property 'bindings' of null

http://www.blogdaren.com/post-2432.html 問題背景：升級 React Native 0.55.4 --> React Native 0.56.0 後，執行報錯：Cannot read property 'bindin

React Native入門篇—redux react-redux react-navigation-redux-helpers的安裝和配置

注意：未經允許不可私自轉載，違者必究 React Native官方文件：https://reactnative.cn/docs/getting-started/ redux官方文件：https://www.redux.org.cn/ 專案地址GitHub地址：https:/

解決React Native報錯：undefined is not an object (evaluating 'sceneConfig.animationInterpolators')

呼叫this.props.navigator.resetTo出現以下問題 undefined is not an object (evaluating ‘sceneConfig.animationInt

React Native佈局實踐：開發京東客戶端首頁（四）——首頁功能按鈕及控制元件封裝

從我寫第一篇React Native文章以來，我們幾乎是把所有的程式碼都放在一個js檔案中實現的，隨著工程複雜度的增加，各種自定義控制元件的程式碼就和業務邏輯程式碼耦合嚴重，這篇文章就來解決這一問題，讓我們一起來學習控制元件封裝的方法。1.明確需求首頁功能按鈕由一個圖片、一行

React Native導航器之react-navigation使用

在上一節Navigation元件，我們使用系統提供的導航元件做了一個跳轉的例子，不過其實戰能力不強，這裡推薦一個超牛逼的第三方庫：react-navigation。在講react-navigation之前，我們先看一下常用的導航元件。導航控制元件常見

關於新版本react-native報錯：Cannot find module 'invariant'

剛接觸React Native，安裝配置好所有的環境，建立的第一個應用時報瞭如下錯誤： Cannot find module 'invariant' 搞了半天沒搞好，在網上搜了果然有遇到這個問題的，有的說卸掉npm，node，nvm之後重灌，覺得不靠譜就放棄了；採用了

react-native-gp-utils(對react-native全局進行配置,對內置對象原型)

catch 形式使用新項目 format) 三種 prop 指定元素 zha react-native-gp-utils 對react-native全局進行配置,對內置對象原型鏈增加方法,增加常用全局方法. 每次新建react-native項目之後都會發現有一些很常用的

React 生命周期鉤子函數詳解

turn clas () 函數 ted dea truct tor stat 一、回顧vue中的生命周期 beforeCreate created beforeMount mounted b

react-native 輪播圖 ——react-native-swiper使用

react-native-swiper的github地址使用說明： 1. 先安裝React-native-swiper <Swiper style={styles.swiper} height={200} horizontal={true} paginationSty

React Native未來導航者：react-navigation 使用詳解

一、開源庫介紹

二、react-navigation使用

相關推薦