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

前端之家收集整理的这篇文章主要介绍了混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

废话不多先安利,然后继续学习 RN
有好东西都往里面丢,努力做好归纳

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

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


效果图可以看http://www.jb51.cc/article/p-vzbxrgfy-w.html
这边就不重复贴了

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

猜你在找的React相关文章