RN实战项目页面导航和启动页面实现(三)
RN中处理页面切换可以使用导航器来实现,本项目中用的是Navigator,而官方已经不推荐使用了,而采用新的react-navigation库来替代。 官网 react-navigation;
Navigator RN中文网学习
直接看代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
Navigator,
} from 'react-native';
import Splash from './views/Splash';
export default class Index extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Navigator
initialRoute={{ name: '欢迎界面', component: Splash }}
configureScene={() => Navigator.SceneConfigs.FloatFromBottom}
renderScene={(route, navigator) => {
//返回按钮
navigator.goBack = function () {
navigator.pop();
}
//退出整个app
navigator.exitApp = function () {
let routes = navigator.getCurrentRoutes();
for (var i = 0; i < routes.length; i++) {
navigator.pop();
}
}
return (
<route.component {...route} navigator={navigator}></route.component>
);
}}
></Navigator>
);
}
}
AppRegistry.registerComponent('react_test', () => Index);
initialRoute初始化一个route,我们看代码得知,初始化的时候给了一个对象作为参数,{ name: ‘欢迎界面’, component: Splash },Splash即为默认的第一个界面
configureScene配置信息,页面进入退出的动画效果等
renderScene渲染一个组件,这里需要返回一个组件
{…route} es6 写法,表示把当前routes身上的所有属性赋值给当前组件,第一次执行的时候 我们在Splash组件里面即可通过this.props.name获取到 ‘欢迎界面’
navigator={navigator} 在当前组件通过this.props.navigator 获取到navigator对象
//返回按钮 为navigator新增加一个方法 goBack,使用的时候通过this.props.navigator.goBack();即可返回到上一个界面
navigator.goBack = function () {
navigator.pop();
}
//退出整个app, pop掉所有的界面
navigator.exitApp = function () {
let routes = navigator.getCurrentRoutes();
for (var i = 0; i < routes.length; i++) {
navigator.pop();
}
}
来到Splash
import React , { Component } from 'react';
import {
View,
Image,
BackAndroid,
Platform,
} from 'react-native';
import Login from './Login';
/**
* 启动界面
*/
let navigator;
export default class Splash extends Component{
constructor(props){
super(props);
navigator = this.props.navigator;
}
componentWillMount() {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
componentWillUnMount() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid() {
if (navigator) {
let routes = navigator.getCurrentRoutes();
if (routes.length > 3) {
navigator.pop();
return true;
}
}
return false;
}
componentDidMount(){
setTimeout(() => {
const navigator = this.props.navigator;
if(navigator){
navigator.push({
name:'登录界面',
component:Login,
params:{
data:'login test',
}
});
}
},2000);
}
render(){
return (
<View style={{flex:1}}>
<Image source={require('../img/ic_splash.png')}></Image>
</View>
);
}
}
启动界面很简单,就是显示一个图片,然后在组件加载完成2秒之后中去到登录界面
重点说下BackAndroid,安卓手机中存在物理返回按键,而苹果手机中并不存在,所以这里需要我们针对安卓平台特殊处理,在组件将要挂载和将要卸载分别注册和注销监听器,BackAndroid.addEventListener(‘hardwareBackPress’, this.onBackAndroid);BackAndroid.removeEventListener(‘hardwareBackPress’, this.onBackAndroid);
onBackAndroid() {
//这里遇到的坑,刚开始navigator 是在这里获取的 也就是navigator = this.props.navigator;
//但是这里获取不到,因为这里的this 指的不是这个组件 ,后来在构造器中获取到,并设置为全局变量使用即可
if (navigator) {
//获取到当前路由的长度,因为我的页面逻辑是这样的 启动页-登录夜-主页
let routes = navigator.getCurrentRoutes();
if (routes.length > 3) {
navigator.pop();
return true;
}
}
//false 表示直接退出app
return false;
}