? ? ? ? ?Navigator:通俗點講椅棺,就是說一個頁面跳轉(zhuǎn)到另外一個頁面,相當(dāng)于是頁面的控制器齐蔽。如果大家稍微熟悉下Android的開發(fā)两疚,就知道,在Android中一個頁面就是一個Activity含滴,然后通過Intent,我們可以跳轉(zhuǎn)到另外一個Activity诱渤。
當(dāng)時研究這個也看不懂你面的邏輯;但是發(fā)現(xiàn)這個寫的方式都是死的谈况,以后拷貝粘貼就ok了勺美。廢話太多下面具體介紹Navigator
先看一下一個render()方法:
大家可以看到有三個屬性:
initialRouter: 路由初始化配置信息,就是說頁面加載時赦政,第一次需要展現(xiàn)什么那個頁面的內(nèi)容尚猿,一般在前面先定義好森缠;
configureScene: 場景轉(zhuǎn)換動畫配置。在RN看來占卧,從一個頁面切換到另外一個頁面,就是從一個頁面切換到另外一個頁面联喘,這里配置的是場景動畫信息屉栓,比如Navigator.SceneConfigs.VerticalDownSwipeJump就是頁面從下面彈出來
renderScene: 渲染場景,讀取initialRouter傳來的數(shù)據(jù)耸袜,確定顯示那些內(nèi)容友多。里面的倆個參數(shù)route:是傳遞過來的name和componment;navigator是一個navigator對象堤框。
在通俗點說就是以后我們想跳轉(zhuǎn)的哪個頁面就直接更改initialRouter里面?zhèn)z個參數(shù)的數(shù)值就ok了但是需要navigator.push的方法域滥;下面我們就開始跳轉(zhuǎn):
一開始我們進入的界面是List頁面
然后我們點擊頁面上的文字就跳轉(zhuǎn)到下一個頁面代碼如下:
這個方法里面包括哪些功能第一個 就是navigator.push調(diào)轉(zhuǎn)功能調(diào)轉(zhuǎn)到Detail的頁面纵柿;還有就是我們想把哪些List頁面上的哪些信息傳遞過去,一個是User启绰,一個是Id昂儒;還有一個功能就是我們從Detail頁面想獲取哪些數(shù)據(jù),上面代碼都有注釋委可;
下面我們就看看我們跳轉(zhuǎn)過去的頁面長什么樣:當(dāng)然肯定會接收我們上一個頁面?zhèn)鬟f過來的信息代碼:
代碼寫到這里我們基本完成前倆步頁面:頁面的跳轉(zhuǎn)加正向傳值功能:顯示效果:點擊文字知乎的跳轉(zhuǎn)渊跋。
下面我們在介紹逆向傳值:就是根據(jù)第二個頁面的信息跳轉(zhuǎn)到第一個頁面,當(dāng)點擊第二個頁面的文字時:
const ?USER_MODELS={
? ? ?1:{name:'qsd',age:'24'},
? ? ? 2:{name:'wzy',age:'20'},
}
這個方法的功能:就是把我們用從頁面而獲得信息先得到:所以定義一個time變量:就是根據(jù)ID的數(shù)值獲取信息:id為1時候?qū)?yīng)的信息:{name:'qsd',age:'24'},最后把這個頁面pop掉回來上一個頁面
然后就回到我們開始第一個頁面的那個獲取第二個頁面信息的方法了:
getTime:function(time){
? ? ? self.setState({
? ? ? time:time
})
}
最后的跳轉(zhuǎn)回來的效果就是:
大家還有什么不理解的可以留言討論着倾,因為我也是了解的很淺拾酝。