react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參的實(shí)例詳解
頁(yè)面跳轉(zhuǎn)
navigate
this.props.navigation.navigate('Details')
跳轉(zhuǎn)到"Details"這個(gè)頁(yè)面,但是如果多次跳轉(zhuǎn)到這個(gè)頁(yè)面,頁(yè)面路由本質(zhì)上是不會(huì)發(fā)生改變的。
push
this.props.navigation.push('Details')
不建議直接使用push,這樣會(huì)直接添加路由,而不會(huì)看看之前是不是有該路由。
back
返回上一個(gè)頁(yè)面
this.props.navigation.goBack(); 或: this.props.navigation.pop();
Top
返回堆棧中的第一個(gè)頁(yè)面
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頁(yè)面的參數(shù):
this.props.navigation.setParams({ data: '321' })
到此這篇關(guān)于react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參的文章就介紹到這了,更多相關(guān)react-native路由跳轉(zhuǎn)與傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- react路由跳轉(zhuǎn)傳參刷新頁(yè)面后參數(shù)丟失的解決
- react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例
- React Router 5.1.0使用useHistory做頁(yè)面跳轉(zhuǎn)導(dǎo)航的實(shí)現(xiàn)
- react 跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案
- react實(shí)現(xiàn)同頁(yè)面三級(jí)跳轉(zhuǎn)路由布局
- react-native使用react-navigation進(jìn)行頁(yè)面跳轉(zhuǎn)導(dǎo)航的示例
- React中的頁(yè)面跳轉(zhuǎn)方式示例詳解
相關(guān)文章
React項(xiàng)目開(kāi)發(fā)中函數(shù)組件與函數(shù)式編程關(guān)系
函數(shù)組件和函數(shù)式編程究竟是什么關(guān)系呢?本文會(huì)圍繞這個(gè)話題展開(kāi)講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11webpack4+react多頁(yè)面架構(gòu)的實(shí)現(xiàn)
webpack在單頁(yè)面打包上應(yīng)用廣泛,以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁(yè)面架構(gòu)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10使用React實(shí)現(xiàn)內(nèi)容滑動(dòng)組件效果
這篇文章主要介紹了使用React實(shí)現(xiàn)一個(gè)內(nèi)容滑動(dòng)組件效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05詳解React-Native解決鍵盤(pán)遮擋問(wèn)題(Keyboard遮擋問(wèn)題)
本篇文章主要介紹了React-Native解決鍵盤(pán)遮擋問(wèn)題(Keyboard遮擋問(wèn)題),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07React觸發(fā)render的實(shí)現(xiàn)方法
這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10react組件memo useMemo useCallback使用區(qū)別示例
這篇文章主要為大家介紹了react組件memo useMemo useCallback使用區(qū)別的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-08