React Native中Navigator的使用方法示例
前言
眾所周知在React Native中如何實(shí)現(xiàn)頁面的跳轉(zhuǎn),這是一個(gè)突破點(diǎn)也是一個(gè)難點(diǎn),想讓我們的頁面切換起來動起來應(yīng)該是每一個(gè)初學(xué)者所追求的,那么在RN中實(shí)現(xiàn)這樣的功能那必須要了解Navigator的用法了.Navigator是React Native自帶的組件,不需要導(dǎo)入第三方組件,下面就來具體說明如何使用.
方法如下
首先,我們最好不要把index.ios.js和index.android.js文件寫的很冗余很多代碼,可以僅僅將其當(dāng)做是一個(gè)工程的入口,好,廢話不多說,開始上代碼.
1.習(xí)慣于在工程目錄下建立js文件夾,并建立一個(gè)index.js文件(文件名可隨便取)
2.代碼編寫
代碼實(shí)現(xiàn)
renderScene和configureScene方法可以寫在<Navigator />中但是那樣會顯得臃腫,所以建議這種寫法.
configureScene(route){
if(route.sceneConfig){ return route.sceneConfig; }
return Navigator.SceneConfigs.FloatFromRight;//這里是設(shè)置頁面切換的動畫效果,具體可參考官網(wǎng)
}
頁面初始化
import LoginPage from './pages/login';
const initialRoute = {
name: 'login',
page: LoginPage,
};
這幾句代碼相當(dāng)于是初始化,從index.ios.js中導(dǎo)入了index.js文件,而index.js文件相當(dāng)于設(shè)置了路由,初始化跳轉(zhuǎn)到login頁面.那么是不是實(shí)現(xiàn)跳轉(zhuǎn)每個(gè)頁面都要這么寫呢?當(dāng)然不是!
3.后續(xù)頁面的跳轉(zhuǎn)
上述代碼說了初始跳轉(zhuǎn)到login頁面,那么login頁面跳轉(zhuǎn)到其他頁面是不是還要寫這么多代碼呢?當(dāng)然你愿意寫這么多也是可以的,這里講解更簡潔的方式.
首先,在login頁面import需要跳轉(zhuǎn)到的目標(biāo)頁面.
目標(biāo)頁面導(dǎo)入
然后,記得寫上這個(gè)方法,接收props
constructor(props, context) {
super(props);
}
定義一個(gè)方法,如下圖所示,name為目標(biāo)頁面的文件名,name為import時(shí)起的名.
目標(biāo)頁面跳轉(zhuǎn)方法
最后,調(diào)用方法實(shí)現(xiàn)跳轉(zhuǎn).
方法調(diào)用
也可以在Button ,TouchableHighlight等組件中調(diào)用.
后續(xù)的頁面以此類推,可以實(shí)現(xiàn)頁面跳轉(zhuǎn)的功能,希望對你們有所幫助.
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- 微信小程序間使用navigator跳轉(zhuǎn)傳值問題實(shí)例分析
- DataGridView使用BindingNavigator實(shí)現(xiàn)簡單分頁功能
- React Native中NavigatorIOS組件的簡單使用詳解
- react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
- React-Native中禁用Navigator手勢返回的示例代碼
- react-native-tab-navigator組件的基本使用示例代碼
- ReactNative頁面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
- JavaScript navigator.userAgent獲取瀏覽器信息案例講解
相關(guān)文章
在開發(fā)React應(yīng)用時(shí),嚴(yán)格模式StrictMode可以幫助開發(fā)者捕捉到組件中的錯(cuò)誤和潛在問題,安裝React Developer Tools瀏覽器擴(kuò)展檢查組件的props和狀態(tài),直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地測試React組件和執(zhí)行端到端測試2024-10-10
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個(gè)階段：掛載，更新，卸載，錯(cuò)誤處理，本文主要介紹了這個(gè)階段，感興趣的可以了解一下2021-06-06
React 如何使用時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳
這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
基于React實(shí)現(xiàn)一個(gè)todo打勾效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)一個(gè)todo打勾效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
在react-router4中進(jìn)行代碼拆分的方法（基于webpack）
這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法（基于webpack），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
在React項(xiàng)目中引入國際化可以使用第三方庫來實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國際化，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
React Draggable插件如何實(shí)現(xiàn)拖拽功能
這篇文章主要介紹了React Draggable插件如何實(shí)現(xiàn)拖拽功能問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了React組件間傳值及跨組件通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
全棧輕量級搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07