混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

转载请注明出处：这里写链接内容

今天是10月份的最后一天，我加了3个月来的第一个班，挤出了这篇。

废话不多先安利，然后继续学习 RN

有好东西都往里面丢，努力做好归纳

https://github.com/ddwhan0123/Useful-Open-Source-Android

demo还是在上次的ui，只是加了新功能，回退键！

效果图可以看http://blog.csdn.net/ddwhan0123/article/details/52913765

这边就不重复贴了

BackAndroid

理论介绍是api扣来的：

监听硬件的back键操作。如果没有任何监听函数，或者监听函数的返回值不是true，则会调用默认的back键功能来退出应用。

默认是退出应用

有三个常用的方法

static exitApp()

static addEventListener(eventName: BackPressEventName, handler:

Function) #

static removeEventListener(eventName: BackPressEventName, handler:

Function)

看名字就很好理解，分别是

退出APP

增加监听事件

移除监听

exitApp很简单，直接调用即可

两个listener方法需要传入2个参数，1为”tag效果的BackPressEventName”，2为具体实现逻辑的方法。

这里为什么说是类似于tag的BackPressEventName可以看：http://www.jianshu.com/p/44e415a3cb0b 解释的非常棒，图文并茂

Platform

在制作跨平台的App时，多半会碰到针对不同平台编写不同代码的需求。

在不用分包的情况下 可以用Platform来做手机的判断，诸如我要判断是ios还是安卓

if (Platform.OS === 'android') {
//安卓的事
}

if (Platform.OS === 'ios') {
//ios的事
}

安卓还可以用Platform.Version来判断sdk等级

if(Platform.Version === 21){
console.log('Running on Lollipop!');
}

变化大多在main.android.js

import React, {Component, Navigator} from 'react';
import {
AppRegistry,
View,
StyleSheet,
Text,
BackAndroid,
Platform
} from 'react-native';
var titleStr;
var _navigator;
var name;

BackAndroid.addEventListener('hardwareBackPress', function() {
if (_navigator == null) {
return false;
}
if (_navigator.getCurrentRoutes().length === 1) {
return false;
}
if (Platform.OS === 'android') {
_navigator.pop();
}
return true;
});

export default class Main extends Component {
constructor(props) {
super(props);
_navigator = this.props.navigator;
titleStr = this.props.titleStr;
name = this.props.name;
}
render() {
return (
<View>
<Text>{titleStr}
页面 获得的参数: value = {name}</Text>
</View>
);
}
}

AppRegistry.registerComponent('Main', () => Main);

在这个页面我们设置的返回键的监听事件，然后判断了只在上一页有页面，并且导航不为空的时候才做返回行为，不然直接退出 app（默认）

这次我把navigator对象”带来带去”，让他很好的管理者，页面集合。

这篇内容比较简单，但是打好基础也很重要哦！！

源码地址：https://github.com/ddwhan0123/ReactNativeDemo (有点包结构问题，看着调就行，操作起来不复杂)

相关传送门：http://reactnative.cn/post/480