React Navigation 的使用基礎部分(四)向路由傳值
還記得我們之前說過"我們講引數的時候會詳細說明"嗎?是的,就是現在。
現在我們知道怎樣建立一個包含若干路由的棧導航器,還知道了在路由之間跳轉,現在讓我們來看看跳轉時怎樣向路由傳遞資料。
有兩點:
- 可以將引數放進物件中,作為navigation.navigate的第二個引數來向路由傳遞:
this.props.navigation.navigate('RouteName', { /* params go here */ })
- 在元件中讀取引數:
this.props.navigation.getParam(paramName, defaultValue)
.
class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => { /* 1. Navigate to the Details route with params */ this.props.navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here', }); }} /> </View> ); } } class DetailsScreen extends React.Component { render() { /* 2. Get the param, provide a fallback value if not available */ const { navigation } = this.props; const itemId = navigation.getParam('itemId', 'NO-ID'); const otherParam = navigation.getParam('otherParam', 'some default value'); return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> <Text>itemId: {JSON.stringify(itemId)}</Text> <Text>otherParam: {JSON.stringify(otherParam)}</Text> <Button title="Go to Details... again" onPress={() => this.props.navigation.push('Details', { itemId: Math.floor(Math.random() * 100), })} /> <Button title="Go to Home" onPress={() => this.props.navigation.navigate('Home')} /> <Button title="Go back" onPress={() => this.props.navigation.goBack()} /> </View> ); } }
你也可以直接接收引數物件: this.props.navigation.state.params。如果沒有傳遞引數那麼可能為null,所以通常使用getParams更加簡便,不需要去處理null的情況。
如果你想直接通過props接收引數,比如this.props.itemId,你可以使用react-navigation-props-mapper.
總結
navigate
和push
接受可選的第二個引數來向目的路由傳遞引數,例如:this.props.navigation.navigate('RouteName', {paramName: 'value'})
.- 讀取引數可以通過:
this.props.navigation.getParam
- 作為
getParam
的後備選擇, 你也可以使用this.props.navigation.state.params
. 如果沒有指定引數,得到的結果是null
.
相關推薦
React Navigation 的使用基礎部分(四)向路由傳值
原文連結還記得我們之前說過"我們講引數的時候會詳細說明"嗎?是的,就是現在。現在我們知道怎樣建立一個包含若干路由的棧導航器,還知道了在路由之間跳轉,現在讓我們來看看跳轉時怎樣向路由傳遞資料。有兩點:可以將引數放進物件中,作為navigation.navigate的第二個引數來
javascript基礎部分(四)DOM和內建物件
Javascript基礎部分(四)DOM物件和內建物件 4.1與使用者互動 在window物件的方法中,有一些事專門用於處理輸入與輸出資訊的,從而實現頁面與使用者的互動。 (1)、alert() alert()向用戶彈出一個資訊對話方塊,這種模態的對話方塊只是顯示一些訊息和
React Navigation 的使用基礎部分(六)導航欄按鈕
原文連結我們已經知道如何自定義導航欄的樣式,現在我們讓其有感知!好吧,這可能有點過,我們讓其能響應觸控。在導航欄加一個按鈕與導航欄互動最普遍的做法是觸控title左邊或者右邊的按鈕。讓我們在header右邊新增一個按鈕吧!class HomeScreen extends Re
React Navigation 的使用基礎部分(二)Hello React Navigation
原文連結 在web瀏覽器中,你能使用<a>標籤連結到不同的網頁。當用戶點選一個連結,URL被push到瀏覽器歷史棧中。當用戶點選返回按鈕時,瀏覽器將其從棧頂彈出,因此當前頁就是之前訪問過的網頁。React Navive並不想網頁瀏覽器一樣內嵌全域性的歷
Python基礎學習(四)
python 函數 集合 Python 集合: set 顧明思義,就是個集合,集合的元素是唯一的,無序的。一個{ }裏面放一些元素就構成了一個集合,set裏面可以是多種數據類型(但不能是列表,集合,字典,可以是元組) 它可以對列表裏面的重復元素進行去重list1 = [1,2,3,23
Linux基礎初識(四)
target put 文件系統 -m yum 嘗試 flags 應該 操作 Linux基礎初識(四) 一、1. 系統監視和進程控制工具—top和free1) 掌握top命令的功能:top命令是Linux下常用的性能分析工具,能夠實時顯示系統中各個進程的資源占用狀況,類似於W
Linux基礎學習(四)
ubuntu pad 檢查 rom run 文件和目錄 mis fdisk 內存 十一、 系統監控 11.1 系統監視和進程控制工具 11.1.1 top 1) top命令的功能:top命令是Linux下常用的性能分析工具,能夠實時顯示系統中各個進程的資源占用狀況,類似於
linux操作系統基礎篇(四)
空閑 僵屍進程 標準 為什麽 嘗試 mount命令 性能分析 包含 put 系統監控 1. 系統監視和進程控制工具—top和free1) 掌握top命令的功能:top命令是Linux下常用的性能分析工具,能夠實時顯示系統中各個進程的資源占用狀況,類似於Windows的
FPGA基礎知識(四)鎖存器、觸發器、寄存器和緩沖器的區別
高端 指示器 領域 串行 方法 register 緩沖區 計算機 字節 一、鎖存器鎖存器(latch)---對脈沖電平敏感,在時鐘脈沖的電平作用下改變狀態鎖存器是電平觸發的存儲單元,數據存儲的動作取決於輸入時鐘(或者使能)信號的電平值,僅當鎖存器處於使能狀態時,輸出才會隨著
React 實踐項目 (四)
click browser itl ner ise 前端框架 export ive github React在Github上已經有接近70000的 star 數了,是目前最熱門的前端框架。而我學習React也有一段時間了,現在就開始用 React+Redux 進行實戰!
Java基礎——Servlet(四)
服務 興趣 .com coo 容易 log 日常 信心 文件 最近一直在學習Servlet,真的有煩躁,一下子要創建好幾個文件,服務端、客戶端、html頁面。。。。學習進度蠻慢的,很容易失掉信心。當學習到cookie時,發現有好多實現是在我們日常生活中可以會遇得到的,於是又
python基礎教程(四)
一次 不同 ble 排序。 itl tuple uda 基本 append 列表 本節繼續討論列表不同元組和字符串的地方:列表是可變的(mutable)----可以改變列表的內容,並且列表有很多有用的、專門的方法。 List函數可以將一個字符串拆分成列表。 >
Java年度總復習基礎部分(一)
存在 最大 數據 cas 初始化 tomcat java 開關 規範 JAVA總復習綱要 Java傻瓜化的運行環境 1. eclipse 和jre 2. 使用jdk,jdk需要配置環境變量 如何配置環境變量 自己編寫第一個java的運行程序 1 packa
基礎命令(四)
執行過程 硬鏈接 roo 被人 51cto inode 鏈接 內容 將不 SetUID s : 權限 set_uid 在命令執行過程中臨時升級為文件的屬主,只有二進制文件才能被賦予SUID權限chmod u+s 賦權限 chmod u-s 取消S是沒有加x執行權限,加
JAVA基礎課程(四)
Java基礎 java入門 (一)二維數組二維數組:數據類型[] [] 數組名 = new 數據類型[m][n] ;m:代表當前二維數組中有多少個一維數組n:代表每一個一維數組中的長度 定義的方式還有以下兩種情況 數據類型[] 數組名[] = new 數據類型[m][n] 數據類型
Java05-Java基礎語法(四)循環結構
單獨使用 變量 java基礎 表達 java 分號 結構 叠代 結合 Java05-Java基礎語法(四)循環結構 循環結構(重復/叠代):根據條件重復執行部分語句 1、while循環結構 while(條件表達式){ 循環體語句; } 1)語法:a、while是
react-navigation學習筆記(一)
法則 gate avi 學習 之前 navi 路由 存在 是否 1.關於this.props.navigation.navigate()與this.props.navigation.push()的區別 navigate方法在跳轉時會在已有的路由棧中查找是否已經存在該值,若存
linux菜鳥基礎學習 (四)
工作 進程優先級 監控系統 emctl 負載 img http 狀態 界面 一.進程 1.進程定義: 進程就是cpu未完成的工作. 2.ps命令 psa ##關於當前環境的所有進程x| -A ##所有進程f ##顯示進程從屬關系e ##顯示進程調用環境工具的
linux菜鳥基礎學習 (四) openssh-server
eat users onf 遠程 use edi exc 4.2 mark openssh-server 1.openssh-server 功能:讓遠程主機可以通過網絡訪問sshd服務,開始一個安全shell 2.客戶端連接方式 ssh 遠程主機用戶@遠程主機ip[root
java程式設計師菜鳥進階(十六)linux基礎入門(四)linux下VIM文字編輯器使用
linux下編寫配置檔案最好的編輯工具莫過於vim了。Vim的功能實在太多太全,Vim的很多功能也許我們很少用得到,真正為大家常用的功能可能只佔到所有功能的冰山一角。Vim終歸只是一個編寫程式碼或編輯文件的工具,所以只要掌握一些足夠我們使用的功能即可。 做個廣告