一.Android端启动图的js处理方法
除了可以设置原生的启动图之外,我们还可以通过js来实现跨平台的启动图
App进入先显示启动页,定时器2秒后再触发导航方法。注意启动页的页面还要设置路由。App中可以设置多个路由,实际上就一个,diff算法会自动计算。注意此时要用路由的这个方法(替换页面):
二.复杂组件通信的2种方案
举例子:在商品列表选了几个商品,然后进入结算页.这时如果清空购车车,再返回商品列表页,数据已经改变了,但是发现组件没更新,之前选的商品没还在。
解决方案:
方案1:路由传递参数,往下一个路由push传递参数(参数的值是一个回调)
let _that=this; //注意这里留住this; navigator.push({ name: 'GouWu',component: GouWu,passProps: { //这里跳转到结算页面传了一个参数,值是一个处理当前页面方法。 fetchData: function () { //这里处理当前页面的数据 _that.setState.......... } } })
方案2:使用redux。建议抛弃,太繁琐
三.BackHandler处理安卓物理返回键
注意:接管的是整个应用。所以只写一便,写在最外层的组件中
/** * * 处理安卓手机上的物理返回键 * */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View,Platform,ToastAndroid,BackHandler //处理android的物理返回键,这里导入API } from 'react-native'; var BackHandlerTest=require("./BackHandlerTest"); class BackHandlerDemo extends Component { //固定写法。页面渲染前执行: componentWillMount() { if(Platform.OS==="android"){ //为返回键绑定了一个事件 BackHandler.addEventListener("hardwareBackPress",this.onBackPressed) } } //固定写法。页面卸载前执行 componentWillUnmount(){ if(Platform.OS==="android"){ //取消该返回键的绑定事件。 // BackHandler.removeEventListener("hardwareBackPress",this.onBackPressed) } } //这里特别注意这种针对处理物理返回键写法。把方法作为一个arrow function属性定义。,初始化的时候就绑定了this指针。 onBackPressed = () => { const navigator = this.props.navigator; const routers = navigator.getCurrentRoutes();//获取所有的路由 //判断路由的长度 if (routers.length > 1) { navigator.pop(); return true;//这里注意,自己操作返回键后最后要返回true,接管默认行为 }else{ //这里是处理安卓的按二次退出应用 if(this.lastBackPressed && this.lastBackPressed + 2000 >=Date.now()){ //最近2秒内按过back键,可以退出应用 return false;//这里主要退出要return false.自己不操作返回键,默认行为 } this.lastBackPressed=Date.now(); ToastAndroid.show("再按一次退出应用",ToastAndroid.SHORT); return true; } }; render() { return ( <View style={styles.wrapper}> <Text style={{color:"white",fontSize:18}} onPress={()=>{ this.props.navigator.push({ name:"辅助页面",component:BackHandlerTest }) }}>点我跳转</Text> </View> ); } } ………………..
四.链接原生库
并不是所有的APP都需要使用全部的原生功能,包含支持全部特性的代码会增大应用的体积。但我们仍然希望能让你简单地根据自己的需求添加需要的特性。
在这种思想下,我们把许多特性都发布成为互不相关的静态库。
大部分的库只需要拖进两个文件就可以使用了,偶尔你还需要几步额外的工作,但不会再有更多的事情要做了。
我们随着React Native发布的所有库都在仓库中的Libraries
文件夹下。其中有一些是纯Javascript代码,你只需要去require
它们就可以使用了。另外有一些库基于一些原生代码实现,你必须把这些文件添加到你的应用,否则应用会在你使用这些库的时候产生报错。
手动链接原生库请看官网..................
原文链接:https://www.f2er.com/react/302684.html