react-native中路由頁面的跳轉(zhuǎn)與傳參的實例詳解
頁面跳轉(zhuǎn)
navigate
this.props.navigation.navigate('Details')
跳轉(zhuǎn)到"Details"這個頁面,但是如果多次跳轉(zhuǎn)到這個頁面,頁面路由本質(zhì)上是不會發(fā)生改變的。
push
this.props.navigation.push('Details')
不建議直接使用push,這樣會直接添加路由,而不會看看之前是不是有該路由。
back
返回上一個頁面
this.props.navigation.goBack(); 或: this.props.navigation.pop();
Top
返回堆棧中的第一個頁面
this.props.navigation.popToTop()
傳參
A跳轉(zhuǎn)到B
this.props.navigation.push('Details', { data: 123 })
B獲取A傳遞的參數(shù)
<Text>{this.props.navigation.getParam('data')}</Text> 或: <Text>{this.props.navigation.state.params.data}</Text>
改變傳到B頁面的參數(shù):
this.props.navigation.setParams({ data: '321' })
到此這篇關(guān)于react-native中路由頁面的跳轉(zhuǎn)與傳參的文章就介紹到這了,更多相關(guān)react-native路由跳轉(zhuǎn)與傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React項目開發(fā)中函數(shù)組件與函數(shù)式編程關(guān)系
函數(shù)組件和函數(shù)式編程究竟是什么關(guān)系呢?本文會圍繞這個話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11webpack4+react多頁面架構(gòu)的實現(xiàn)
webpack在單頁面打包上應(yīng)用廣泛,以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁面架構(gòu)的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10詳解React-Native解決鍵盤遮擋問題(Keyboard遮擋問題)
本篇文章主要介紹了React-Native解決鍵盤遮擋問題(Keyboard遮擋問題),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07React-Native做一個文本輸入框組件的實現(xiàn)代碼
這篇文章主要介紹了React-Native做一個文本輸入框組件的實現(xiàn)代碼,非常具有實用價值,需要的朋友可以參考下2017-08-08