React Native未來導航者:react-navigation 使用詳解
上篇部落格和大家分享了關於React Native jsBundle預載入,介面啟動優化的內容,詳情可點選:
轉自:http://blog.csdn.net/u013718120/article/details/72357698
一、開源庫介紹
今年1月份,新開源的React-natvigation庫備受矚目。在短短不到3個月的時間,github上星數已達4000+。Fb推薦使用庫,並且在React Native當前最新版本0.44中將Navigator刪除。react-navigation據稱有原生般的效能體驗效果。可能會成為未來React Native導航元件的主流軍。本篇內容基於【 ^1.0.0-beta.9 】版本來介紹關於該庫的使用和實戰技巧。可以看到,雖然是beta版本,不過基本穩定,大家可放心在專案中使用。該庫包含三類元件:
(1)StackNavigator:用來跳轉頁面和傳遞引數
(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 - 當您的標籤是字串時,要覆蓋內容部分中的文字樣式的樣式物件
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';
- 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