混合开发的大趋势之一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