1、導(dǎo)航器用于頁(yè)面之間的切換,根據(jù)文檔介紹,從0.44版本開(kāi)始,Navigator被從react native的核心組件庫(kù)中剝離到了一個(gè)名為react-native-deprecated-custom-components的單獨(dú)模塊中。如果你需要繼續(xù)使用Navigator,則需要先yarn add react-native-deprecated-custom-components安裝,然后從這個(gè)模塊中import,即import { Navigator } from 'react-native-deprecated-custom-components'.
2、具體使用方法可以看http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2,里面包含了頁(yè)面的跳轉(zhuǎn)以及傳參;
3、補(bǔ)充一點(diǎn),針對(duì)android app開(kāi)發(fā)中經(jīng)常會(huì)在第一個(gè)頁(yè)面雙擊兩下退出應(yīng)用,這個(gè)可以放程序的入口處,避免每個(gè)頁(yè)面都寫(xiě);
import React, {Component} from 'react';
import {
Platform,
BackAndroid,
ToastAndroid,
} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components'
import Splash from './component/SplashComponent'
import hookNavigator from './utils/hookNavigator';
export default class App extends Component {
render() {
return (
<Navigator
ref={this.onNavigatorRef}
initialRoute={{id: 'splash', component: Splash}}
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
);
}
//這里需要把navigator的引用設(shè)置為全局變量,后面需要使用到該引用
onNavigatorRef = (ref) => {
this.navigator = ref;
if (ref) {
hookNavigator(ref);
}
};
configureScene(route) {
// if (route.sceneConfig) { // 有設(shè)置場(chǎng)景
// return route.sceneConfig;
// }
return Navigator.SceneConfigs.PushFromRight; // 默認(rèn),右側(cè)彈出
}
renderScene(route, navigator) {
return <route.component {...route.passProps} nav={navigator}/>;
}
componentDidMount() {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => {
let nav = this.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
nav.pop();
return true;
}
let now = new Date().getTime();
if (now - this.lastClickTime < 2500) {
//2.5秒內(nèi)點(diǎn)擊后退鍵兩次推出應(yīng)用程序
return false;//控制權(quán)交給原生
}
this.lastClickTime = now;
ToastAndroid.show('再按一次退出應(yīng)用', ToastAndroid.SHORT);
return true;
};
}