前言:html
如今混合開發已經愈來愈發火熱,也許將來不久就會將原生開發一點一點吞噬掉,因此鄙人也開始瞭解一些關於RN相關知識,因爲我是從iOS轉過來並無前端開發經驗,對JS,ES6並非很熟悉,因此上手很吃力,看官網並不能快速消化.只能看一些傻瓜式教程. 作APP開發頁面跳轉在項目中是最基本的.前段時間剛剛學習了在RN中的頁面跳轉.查閱了特別多的相關知識點.配合RN中文網https://reactnative.cn/docs/navigation/版本號(0.56). 裏邊提到開發導航有兩種方式. 前端
1.NavigatorIOS 2.React Navigation node
先說第一種,我是作iOS的,看到NavigatorIOS顯得格外的親切,而且有提到他是基於iOS原生UINavgationController封裝的,就更讓人興奮了.可是官方建議,若是隻是開發iOS平臺能夠用這種,讓我打消了學習他的念頭,學習RN不就是爲了他能夠一套代碼適用於安卓和蘋果兩端.因此我果斷放棄.react
第二種方式React Navigation.官方也是推薦學習這種方式.他是一種單獨的導航庫,使用簡單.npm
首先安裝庫,在終端執行命令行:yarn add react-navigation. yarn是Facebook提供的替代npm的工具,能夠加速node模塊的下載,若是沒有安裝yarn 命令行執行: npm install -g yarn react-native-cli 安裝完yarn後要設置鏡像源: 1. yarn config set registry https://registry.npm.taobao.org --global 2. yarn config set disturl https://npm.taobao.org/dist --global 而後再去安裝React Navigation庫就能夠了
函數
接下來實戰, 咱們須要使用的一個核心函數是createStackNavigator ①要先引用該函數,②它須要一個路由配置對象.工具
最簡單的實例,實現兩個界面跳轉.首先咱們先建立這兩個界面文件,我將他們命名爲HomeScreen,DetailScreen. 先看一下效果學習
廢話很少說,直接看代碼 ui
而後在看DetailScreen界面url
最後在App.js中
這樣就實現了簡單頁面跳轉了. 可是在平時開發中並不會這麼簡單,確定會有各類狀況,好比產品經理會要求標題顏色,背景顏色.標題大小等等要求.我們接着往下看
還有不少屬性,這裏只簡單例舉幾個常見的.太多就不一一介紹了.可自行百度就能夠. 那麼如今問題又來了.一個項目少說幾十個界面.總不能每一個界面都加這麼一段代碼吧.那多撈!!,確定要設置一個全局的樣式.若有個別頁面有需求在單獨設置便可. 咱們須要在路由位置進行設置.
到這裏咱們就實現了全局的設置導航條的樣式. 在開發中常常會有界面傳值.點擊Home界面按鈕.跳轉Detail界面.傳遞值過去
若是多個值就('Details',{那麼:'傳值'},{age:20})便可,而後在Details界面去接收一下便可.
接下來咱們看自定義返回按鈕和導航條右側按鈕,由於平時開發中可能系統返回按鈕並不符合需求.
經過上邊咱們能夠看到,返回按鈕旁邊有文字,默認是上個界面的title,首先去掉按鈕旁邊的文字,這裏須要注意的是,好比想去掉Details頁面的文字,那麼咱們須要在上個界面去操做.也就是Home界面.
咱們再次load界面,就會發現文字不見了!!下邊是自定義返回按鈕和右側按鈕
到這裏咱們就實現了基本的導航條功能.若是對你有幫助,請分享給身邊的朋友.讓咱們一塊兒進步!
另外爲了使你們可以快速掌握RN技術,並上手項目.升值加薪,樓主以超低價分享學習視頻,從零基礎到大神.加羣領取
我代碼以圖片的形式展現一是爲了更直觀的展現,另外一方面是推薦你們敲一遍加深印象.如需源碼請加羣,交流學習!最後附上底部tabbar導航的學習分享:http://www.javashuo.com/article/p-rqxsxbou-ha.html