我們都玩過各種APP 那么APP里面各個(gè)板塊（頁面）之間的路由切換 是如何做的呢粪摘？那么我先說說網(wǎng)頁里面是如何做的吧 網(wǎng)頁代碼：
<div>
<ul>
<li><a href='home.html'>首頁</a></li>
<li><a href='list.html'>列表</a></li>
<li><a href='find.html'>發(fā)現(xiàn)</a></li>
<li><a href='cart.html'>購物車</a></li>
<li><a href='my.html'>個(gè)人中心</a></li>
</ul>
</div>
很明顯網(wǎng)頁中 路由的切換跳轉(zhuǎn)都是由href='xxx'跳轉(zhuǎn)來完成
但是href在APP開發(fā)里面可不好使 href是瀏覽器里面a標(biāo)簽屬性 APP里面可沒有a標(biāo)簽 那么APP開發(fā)里面的頁面跳轉(zhuǎn)（路由跳轉(zhuǎn)）是如何實(shí)現(xiàn)的呢
這就是我要講的react-native里面的Navigator組件了蚪战。
開始
首先我們看看Navigator在render方法里的最終代碼 然后在慢慢解釋
render() {
return (
<Navigator
initialRoute={{name:'home'}}
configureScene={this.configureScene}
renderScene={this.renderScene.bind(this)} />
);
}
initialRoute 設(shè)置默認(rèn)路由模塊 參數(shù)是object形式
{
name:'xxx', // 模塊名稱
index:0, //模塊索引
}
configureScene 用來配置場景動(dòng)畫和手勢,也就是設(shè)置路由切換時(shí)過度的動(dòng)畫 例如：
configureScene(route){
return Navigator.SceneConfigs.FadeAndroid; //淡入淡出
}
renderScene 用來渲染指定路由的場景。調(diào)用的參數(shù)是路由和導(dǎo)航器
renderScene(router, navigator){
var Mod = router.component;
this._navigator = navigator;
switch(router.name){
case "cate": Mod = Cate; break;
case "find": Mod = Find; break;
case "cart": Mod = Cart; break;
case "my": Mod = My; break;
default: Mod = Home; break;
}
return <Mod navigator={navigator} />;
}
使用
1.在當(dāng)前組件內(nèi) 可以這樣來控制路由的切換
this._navigator.push({name: 'cart'});
2.在路由 子模塊里面通過props來獲取navigator
this.props.navigator.push({name: 'home'});
效果：
bbb.gif
