转载请注明出处:这里写链接内容
今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇。
废话不多先安利,然后继续学习 RN
有好东西都往里面丢,努力做好归纳
@L_502_1@
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 (有点包结构问题,看着调就行,操作起来不复杂)