通過Navigator實現(xiàn)頁面的跳轉(zhuǎn)
一、在index.android.js中悟耘，添加Navigator（ios中也需要寫，所以最好單獨(dú)抽出來）
首先導(dǎo)入Navigator
import {Navigator} from "react-native-deprecated-custom-components";
具體實現(xiàn)：
component：Launch 設(shè)置首先要顯示的歡迎頁頁面
render() {
//返回
return (
<Navigator
initialRoute={{name:'啟動頁',component:Launch}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.props} navigator={navigator} />
}}
/>
);
}
二、歡迎頁面
顯示一張圖片氓扛，三秒后跳轉(zhuǎn)到首頁，主要代碼：
//復(fù)雜的操作： 定時器 網(wǎng)絡(luò)請求
componentDidMount(){
//定時：隔2s切換到main
setTimeout(()=>{
//頁面的切換
this.props.navigator.replace({
component:Main,//具體路由的板塊
});
},3000);
}
三论笔、在首頁中采郎，實現(xiàn)詳情頁面的跳轉(zhuǎn)
在首頁中，首先實現(xiàn)底部五個按鈕點(diǎn)擊后頁面之間的切換狂魔，在切換是蒜埋，需要將index.android.js中的navigator傳遞過去
<TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
{this._renderTabItem('首頁',HOME_NORMAL, HOME_FOCUS, HOME, <HomeMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('分類',CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, <CategoryMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('精選',FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, <ChoicenessMine navigator={ this.props.navigator}/>)}
{this._renderTabItem('購物車',CART_NORMAL, CART_FOCUS, CART, <CarMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('我的',MINE_NORMAL, MINE_FOCUS, MINE, <MineMain navigator={ this.props.navigator}/>)}
</TabNavigator>
例如，在第一個頁面首頁HomeMain中最楷，實現(xiàn)點(diǎn)擊某一項整份，跳轉(zhuǎn)到詳情頁：
實現(xiàn)跳轉(zhuǎn)功能代碼：
//跳轉(zhuǎn)到二級界面
_pushToDetail(view, text) {
this.props.navigator.push(
{
component: view,//要跳轉(zhuǎn)的板塊
props: {
title: text,//要傳遞的參數(shù)
}
}
);
}
注：在props寫入要傳遞的參數(shù)，props必須與index.android.js中的一致
四籽孙、實現(xiàn)頁面的返回
this.props.navigator.pop();
在安卓手機(jī)中烈评，如果用戶通過點(diǎn)擊物理返回鍵返回時，若返回時需要進(jìn)行某些操作犯建，需要時間對按鍵的監(jiān)聽讲冠，具體實現(xiàn)：
componentDidMount() {
this.setState({title: this.props.title});
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => {
const nav = this.props.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
nav.pop();
return true;
}
return false;
};
五、實現(xiàn)有回傳值的返回
在跳轉(zhuǎn)頁面：
var _this = this;
this.props.navigator.push(
{
component: nextView,//要跳轉(zhuǎn)的板塊
props: {
title:text,//要傳遞的參數(shù)
//回調(diào)!獲取回傳的user
getUser: function(user) {
Toast.info(user,1);//彈出接收到的值
_this.setState({name:user})
}
}
}
);
在返回頁面：
if (this.props.getUser) {
let user = "注冊成功";
//回調(diào)傳值給上個頁面
this.props.getUser(user);
}
this.props.navigator.pop();
注意：在跳轉(zhuǎn)頁面中适瓦，如果要setState(),必須要重新定義一下this,否則報錯*
六竿开、其他===其他===其他
有些網(wǎng)上在實現(xiàn)頁面跳轉(zhuǎn)，例如首頁跳轉(zhuǎn)到詳情頁玻熙，會出現(xiàn)點(diǎn)擊跳轉(zhuǎn)到詳情頁后否彩，底部的導(dǎo)航欄沒有跟著動，上面是詳情頁嗦随，下面是首頁中底下的五個切換按鈕列荔，所以看著很別扭。原因是因為，在實現(xiàn)五個頁面切換時贴浙，在子view中重新聲明Navigator砂吞，導(dǎo)致中間的view進(jìn)行跳轉(zhuǎn)切換，而不是與所在的Main頁面進(jìn)行切換悬而。具體代碼：
