React Native的導(dǎo)航有兩種,一種是iOS和Android通用的叫做Navigator,一種是支持iOS的叫做NavigatorIOS。我們這里只討論通用的Navigator。會(huì)了Navigator,NavigatorIOS也就不是什么難事了。
本文所使用的是React Native 0.34。FB團(tuán)隊(duì)更新的太快了,我會(huì)在后續(xù)出現(xiàn)大的改動(dòng)的時(shí)候更新本文以及代碼。
Navigator基礎(chǔ)
Navigator在不同的Scene之間跳轉(zhuǎn)。
initialRoute對(duì)象
這是Navigator所必須的,用于指定第一個(gè)Scene。renderScene方法,這個(gè)方法必須。用flow的語法來描述的話是這樣的
renderScene(router: any, navigator: Navigator)
。renderScene
方法用來根據(jù)一個(gè)給定的route來繪制Scene。如:(route, navigator) => { <MySceneComponent title={route.title} navigator={navigator} />}
push方法,
push(route: any)
。Navigator使用這個(gè)方法跳轉(zhuǎn)到一個(gè)新的Scene。
API就了解這么多,下面看一個(gè)簡(jiǎn)單的例子。數(shù)據(jù)都是寫死的。
這個(gè)例子的主要功能就是從一個(gè)Scene(組件)HomeController,跳轉(zhuǎn)到另外的一個(gè)組件PetListController。就是從一組用戶里點(diǎn)選一個(gè)之后顯示這個(gè)用戶擁有的寵物列表。
代碼里的User數(shù)據(jù)以及用戶的Pets數(shù)據(jù)都是寫死的。如果要學(xué)習(xí)網(wǎng)絡(luò)請(qǐng)求方面的內(nèi)容可以參考
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式