RN实战项目页面导航和启动页面实现(三)

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;
}

END