混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
2016-10-31 21:32
886 查看
转载请注明出处:这里写链接内容
今天是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
相关文章推荐
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native之页面跳转
- 混合开发的大趋势之一React Native TextInput (文本输入)
- ReactNative页面跳转实例代码
- 混合开发的大趋势之一React Native之简单的登录界面
- 混合开发的大趋势之一React Native ScrollView (拉伸视图),ListView(列表视图)
- 混合开发的大趋势之一React Native与Android联调
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
- React Native 指定页面物理返回监听
- ReactNative页面跳转Navigator实现的示例代码
- 混合开发的大趋势之一React Native State (状态),Style(样式)
- 混合开发的大趋势之一React Native Props (属性)
- 混合开发的大趋势之一React Native之Image (脑动理解)
- 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图), ListView(列表视图)
- 混合开发的大趋势之一React Native之Image (脑动理解)
- 混合开发的大趋势之一React Native ScrollView (拉伸视图),ListView(列表视图)
- (React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信