前言:
現在混合開發已經越來越發火熱,也許未來不久就會將原生開發一點一點吞噬掉,所以鄙人也開始了解一些關於RN相關知識,由於我是從iOS轉過來並沒有前端開發經驗,對JS,ES6並不是很熟悉,所以上手很吃力,看官網並不能快速消化.只能看一些傻瓜式教程. 做APP開發頁面跳轉在項目中是最基本的.前段時間剛剛學習了在RN中的頁面跳轉.查閱了特別多的相關知識點.配合RN中文網https://reactnative.cn/docs/navigation/版本號(0.56). 里邊提到開發導航有兩種方式.
1.NavigatorIOS 2.React Navigation
先說第一種,我是做iOS的,看到NavigatorIOS顯得格外的親切,並且有提到他是基於iOS原生UINavgationController封裝的,就更讓人興奮了.但是官方建議,如果只是開發iOS平台可以用這種,讓我打消了學習他的念頭,學習RN不就是為了他可以一套代碼適用於安卓和蘋果兩端.所以我果斷放棄.
第二種方式React Navigation.官方也是推薦學習這種方式.他是一種單獨的導航庫,使用簡單.
首先安裝庫,在終端執行命令行: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. 先看一下效果
廢話不多說,直接看代碼
然后在看DetailScreen界面
最后在App.js中
這樣就實現了簡單頁面跳轉了. 但是在平時開發中並不會這么簡單,肯定會有各種情況,比如產品經理會要求標題顏色,背景顏色.標題大小等等要求.咱們接着往下看
還有很多屬性,這里只簡單例舉幾個常見的.太多就不一一介紹了.可自行百度就可以. 那么現在問題又來了.一個項目少說幾十個界面.總不能每個界面都加這么一段代碼吧.那多撈!!,肯定要設置一個全局的樣式.如有個別頁面有需求在單獨設置即可. 我們需要在路由位置進行設置.
到這里我們就實現了全局的設置導航條的樣式. 在開發中經常會有界面傳值.點擊Home界面按鈕.跳轉Detail界面.傳遞值過去
如果多個值就('Details',{那么:'傳值'},{age:20})即可,然后在Details界面去接收一下即可.
接下來我們看自定義返回按鈕和導航條右側按鈕,因為平時開發中可能系統返回按鈕並不符合需求.
通過上邊我們可以看到,返回按鈕旁邊有文字,默認是上個界面的title,首先去掉按鈕旁邊的文字,這里需要注意的是,比如想去掉Details頁面的文字,那么我們需要在上個界面去操作.也就是Home界面.
我們再次load界面,就會發現文字不見了!!下邊是自定義返回按鈕和右側按鈕
到這里我們就實現了基本的導航條功能.如果對你有幫助,請分享給身邊的朋友.讓我們一起進步!
另外為了使大家能夠快速掌握RN技術,並上手項目.升值加薪,樓主以超低價分享學習視頻,從零基礎到大神.加群領取
我代碼以圖片的形式展示一是為了更直觀的展示,另一方面是推薦大家敲一遍加深印象.如需源碼請加群,交流學習!最后附上底部tabbar導航的學習分享:https://www.cnblogs.com/baxiu/p/9483115.html
