十年網(wǎng)站開發(fā)經(jīng)驗 + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊
量身定制 + 運營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
本篇文章給大家分享的是有關(guān)Native中Navigator怎么在React中使用,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司主營成都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),成都h5微信小程序開發(fā)搭建,成都網(wǎng)站營銷推廣歡迎成都等地區(qū)企業(yè)咨詢
首先,我們最好不要把index.ios.js和index.android.js文件寫的很冗余很多代碼,可以僅僅將其當(dāng)做是一個工程的入口,好,廢話不多說,開始上代碼.
1.習(xí)慣于在工程目錄下建立js文件夾,并建立一個index.js文件(文件名可隨便取)
2.代碼編寫
代碼實現(xiàn)
renderScene和configureScene方法可以寫在
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頁面.那么是不是實現(xiàn)跳轉(zhuǎn)每個頁面都要這么寫呢?當(dāng)然不是!
3.后續(xù)頁面的跳轉(zhuǎn)
上述代碼說了初始跳轉(zhuǎn)到login頁面,那么login頁面跳轉(zhuǎn)到其他頁面是不是還要寫這么多代碼呢?當(dāng)然你愿意寫這么多也是可以的,這里講解更簡潔的方式.
首先,在login頁面import需要跳轉(zhuǎn)到的目標(biāo)頁面.
目標(biāo)頁面導(dǎo)入
然后,記得寫上這個方法,接收props
constructor(props, context) { super(props); }
定義一個方法,如下圖所示,name為目標(biāo)頁面的文件名,name為import時起的名.
目標(biāo)頁面跳轉(zhuǎn)方法
最后,調(diào)用方法實現(xiàn)跳轉(zhuǎn).
方法調(diào)用
也可以在Button ,TouchableHighlight等組件中調(diào)用.
以上就是Native中Navigator怎么在React中使用,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。