React Native的Navigator，理解起來相對來說不太容易炊苫，經(jīng)過一些實踐之后談?wù)勎业睦斫馑目怠⒖嫉氖?a target="_blank" rel="nofollow">這篇文章的代碼
零
首先從原理上，Navigator是用來作為組件之間的導(dǎo)航器灰追。而缺乏類似Router性質(zhì)的東西時，最簡單的辦法是將下個組件（也叫場景Scene）狗超，直接告訴導(dǎo)航器监嗜。所以就需要在頁面的上面引入下個組件。 另外就是不要忘記引入 Navigator抡谐。
一
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';// 第一個要展示的組件
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
initialRoute={{ name: defaultName, component: defaultComponent }}
Navigator實現(xiàn)跳轉(zhuǎn)裁奇，是通過Push和Pop方法，相當(dāng)于是一個數(shù)組麦撵，每要跳到下個Scene（場景）刽肠，就把下個頁面push到這個數(shù)組中，當(dāng)想要后退的時候免胃，再把這個Pop出去音五。所以這個數(shù)組里存放的肯定是能索引到這個Scene的數(shù)據(jù)，所以理所應(yīng)當(dāng)存放一個Component鍵是合理的羔沙。這里initialRoute的時候除了Component還引入了一個name躺涝，這個是可選的，不要也行扼雏。
defaultName和defaultComponent存放的就是你要render的第一個Scene坚嗜，相當(dāng)于跳轉(zhuǎn)的起點夯膀，不一定是就是要點擊的那個組件，但必須是包含在里面的苍蔬。
configureScene={(route) => { return Navigator.SceneConfigs.VerticalDownSwipeJump; }}
這里定義了跳轉(zhuǎn)的過渡動畫诱建，如果你的編輯器支持的話，可以刪掉最后一節(jié)碟绑，看看最其他的選項俺猿。
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}
這個段代碼執(zhí)行過后，就將你的“defaultComponent”渲染出來了格仲，其中route.componet就是在initialRoute里寫進去的component押袍。
return <Component {...route.params} navigator={navigator} />
渲染了你要展示的第一個頁面，還順便把幾個參數(shù)寫了進去凯肋，...route.params這個語法是要展開所有params伯病，現(xiàn)在你initialRoute的時候沒有寫 params，但是以后在頁面之間傳遞參數(shù)的時候就會要寫的否过。假如，InitialRoute的時候?qū)懥耍?/p>
initialRoute={{ name: defaultName, component: defaultComponent params:{ id:123} }}
這就相當(dāng)于 ：
return <Component id={route.params.id} navigator={navigator} />
對惭蟋，就是這么神奇苗桂。你會發(fā)現(xiàn)就可以在你渲染的頁面里，通過this.props.id找到這個參數(shù)了告组，當(dāng)然還有后面?zhèn)魅氲膎avigator煤伟，你也可以在props中找到。
二
現(xiàn)在只是剛剛定義好了導(dǎo)航器而已木缝，在現(xiàn)在這個渲染的組件里便锨，找一個可以Touchable開頭的組件，在屬性里寫個onPress={}屬性我碟。假設(shè)點擊這個組件放案，就要前往下個頁面。
此時導(dǎo)航器需要知道下一個Scene是哪里矫俺，所以先在頭部將需要跳轉(zhuǎn)的Scene引入吱殉。
在點擊事件的回調(diào)函數(shù)里，
_pressButton(id) {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'StoryTeller',
component: StoryTeller,
params: {
id: id
}
})
}
}
const {navigator} = this.props; 這么寫相當(dāng)于 const navigator = this.props.navigator
點擊事件發(fā)生后厘托，需要要把下個Scene給Push到navigator中友雳，同樣還有看起來沒什么用的name。注意這里同樣傳了params铅匹，在這里不用手動return出來要加載的頁面了押赊，navigator會依照之前的模式，直接開始渲染包斑。相當(dāng)于：
<StoryTeller id={id} name='StoryTeller' navigator={this.props.navigator} />
三
跳回來流礁，使用的是Pop方法涕俗。和Push類似，不過不用寫參數(shù)：
onBackAndroid = ()=> {
const nav = this.props.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
nav.pop();
}
};
navigator 對象里最后進去的崇棠，一定是當(dāng)前的頁面咽袜，所以初始化的時候數(shù)組的長度為1，這里有一個判斷枕稀，當(dāng)這個數(shù)組的=1的時候询刹，就不再跳轉(zhuǎn)，直接執(zhí)行退出應(yīng)用萎坷。這里適合具有多次點擊返回時候(例如安卓返回鍵)凹联，一般的點擊返回直接執(zhí)行navigator的Pop方法即可。
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}
