【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參
今天介紹一種應用開發中常用的負責頁面切換及導航功能的元件：Navigator
一：Navigator
對於頁面導航其實主要功能就是：每個頁面都知道本身應該切換到哪個頁面，並且切到的頁面會記錄從哪裡來，如果要返回的話，知道返回到哪個頁面。這一切都不需要再用邏輯管理！而且每個頁面之間也可以進行引數傳遞，很方便的元件。廢話不多說：先上示例程式碼：
首先我們匯入 Navigator 元件：
| 12345 | import React,{...Navigator,...}from'react-native'; |
使用方式：
| 12345678910111213 | render(){return(<NavigatorinitialRoute |
上面的程式碼，初始化了導航元件，且設定預設顯示頁面為 FirstPage，這裡需要注意兩點：
1. 我們主要關注 Navigator 裡 initialRoute 中的 兩個引數：
name: 元件名
component: 元件Class名
Himi匯入FirstPage時如下：
| 1 | import FirstPage from'./FirstPage' |
所以 name 和 component 都填寫的為FirstPage
2. <Component {…route.params} navigator={navigator} />
上面這一行是將navigator作為props進行傳遞
3. Navigator.SceneConfigs.HorizontalSwipeJump
上面一行是設定頁面切換之間的動畫效果，更多效果檢視原始檔：
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
下面我們看下FirstPage.js :
1234567891011121314151617181920212223242526272829303132相關推薦【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參今天介紹一種應用開發中常用的負責頁面切換及導航功能的元件：Navigator一：Navigator對於頁面導航其實主要功能就是：每個頁面都知道本身應該切換到哪個頁面，並且切到的頁面會記錄從哪裡來，如果要返回的話，知道返回到哪個頁面。這一切都不需要再用邏輯管理！而且每個頁面之間也可以進行引數傳遞，很方便的元件。 【REACT NATIVE 系列教程之十】真機執行報錯COMMAND /BIN/SH FAILED WITH EXIT CODE 1 的解決方法Himi最近在真機執行遇到 Command /bin/sh failed with exit code 1 的錯誤， 模擬器執行沒有任何問題。此問題已解決，這裡分享下解決方案。先來看下錯誤日誌，如下圖：主要是劃線的部分：1.PhaseScriptExecution Bundle\ React\ Nativ 【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解開發過遊戲的都應該很清楚，“刷屏”是多麼的重要。其實開發應用也如此，當元件的資料被修改後，如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式：this.setState() 【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt 【REACT NATIVE 系列教程之九】REACT NATIVE版本升級步驟與注意事項！由於React Native處於快速迭代發展中，因此元件功能的擴充套件、語法的變更也將會有較大的區別，因此升級版本則屬於務必掌握的了。昨天Himi剛從0.23版本升級到0.26，升級的主要原因有兩點：1. 一些元件在最新版本中加入了很多新的屬性，例如0.23版本中Modal動畫沒有最新的屬性：a 【REACT NATIVE 系列教程之十三】利用LISTVIEW與TEXTINPUT製作聊天/對話方塊&&獲取元件例項常用的兩種方式補充說明：一：很多童鞋問，鍵盤調出來被擋住了，那麼下面給出三個解決方案：1. 在render最外層包一個ScrollView，然後當鍵盤調出時，scrollTo即可實現。2. 在底部新增一個可變化高度的view，根據鍵盤獲取、失去焦點時，進行處理實現二：有的童鞋說對話方塊的背景沒有根據內容長短自適應，OK ， 【REACT NATIVE 系列教程之十一】外掛的安裝、使用與更新(示例:REACT-NATIVE-TAB-NAVIGATOR)本篇主要來詳細介紹如何安裝、升級外掛及講解一個react-native-tab-navigator的示例。本文舉例使用的外掛：react-native-tab-navigator ，選項卡形式的導航1. 通過 https://www.npmjs.com 找到我們想使用的外掛, 搜尋：react-native 【Docker系列教程之五】如何構建Dockerfile在上一篇文章中，我們講述了 Dockerfile 的組成以及指令的編寫過程，在本篇文章中詳細講解如何構建 Dockerfile 。 Dockerfile常用的指令 那麼在講如何構建 Dockerfile 之前，我們回顧一下上一篇的編寫過程： 【React Native系列教程】構建React Native官方Examples尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72835364) 告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家 【React Native系列教程】Mac(OSX)平臺搭建React Native開發環境尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799) 告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家 【React Native系列教程】Windows平臺搭建React Native開發環境尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72454037) 告訴大家一個好訊息，為大家精心準備的React Native視訊教程釋出了，大家 【REACT NATIVE 系列教程之一】觸控事件的兩種形式與四種TOUCHABLE元件詳解本文是RN（React Native）系列教程第一篇，當然也要給自己的群做個廣告： React Native @Himi ：126100395 剛建立的群，歡迎一起學習、討論、進步。本文主要講解兩點：1. PanResponder：觸控事件，用以獲取使用者手指所在螢幕的座標（x,y）或觸發、或滑動、或 【前端】CentOS 7 系列教程之五： 安裝最新版 nginx 並設置 nginx 代理轉發 node 服務con config get http ati sha cal 安裝 pre 轉載請註明出處：http://www.cnblogs.com/shamoyuu/p/linux_5.html 進入/usr/local目錄 cd /usr/local 下載最新 【Docker系列教程之七】如何將自制的漏洞環境打包成映象進行共享我在之前的文章中只是說過，利用 Dockerfile 去拉去映象，而這些映象的拉取都是從 Docker Hub 上拉取下來，而現在我有個想法，我製作好了一個漏洞環境整合的映象，我又該如何進行開源共享，提供給別人使用呢？這就是我們今天的主題了。 首先我們得準備一個 Docker Hub 的帳號， Docker 【Docker系列教程之四】Dockerfile入門在上一篇的文章中，我們把 Docker 容器的工作流程剖析的十分清楚了，我們大體可以知道 Docker 元件協作執行容器可以分為以下幾個過程： Docker 客戶端執行 docker run 命令 Dockerdaemon 【Docker系列教程之三】Docker容器是如何工作的在上一篇的文章中，我給大家主要介紹了一下 Docker 環境的搭建，簡單的講解了一下 Docker 架構，以及用 Docker 命令簡單演示了一下如何拉去一個 images 映象。本篇我們將剖析一下 Docker&nbs 【Lucene4.8教程之五】Luke一、Luke基本內容 1、Luke簡介 Luke可用於檢視Lucene建立的索引，並對其進行基本操作。 2、建立Luke （1）從Github上下載原始檔 https://github.com/ta 【React全家桶入門之十】登錄與身份認證cto json head AC push 操作 undefine 防盜 項目依賴 細致想想。我們的後臺系統還沒有一個登錄功能，太不靠譜，趕緊把防盜門安上！ SPA 【React全家桶入門之十三】Redux中介軟體與非同步action在上一篇中我們瞭解到，更新Redux中狀態的流程是這樣的：action -> reducer -> new state。 文中也講到，action是一個普通的javascript物件、reducer是一個普通的方法，在reducer中根據當前的st android studio gradle 多版本多apk打包（打包系列教程之五）當然從截圖也可以看出，配置多apk打包和上一篇文章配置多渠道打包是一樣的,都是在productFlavors中配置的。如上圖，我們在productFlavors中配置了兩種flavor的apk資訊一種是Beta版，一種是Releases版，同時每個flavor中我們都重新配置applicationId這個屬性 【React全家桶入門之四】加入表單驗證我們的現在可以在應用裡新增使用者了。但是還存在不小的問題： 使用者可以輸入任意長的名字 使用者可以輸入任意的年齡 使用者可以不選擇性別 盲目信任使用者輸入的資料，會給系統埋下不小的隱患。這回我們就來把這隱患扼殺在搖籃之中。 表單驗證無非就是對使用者輸入 |