react native之进阶(一)

一.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它们就可以使用了。另外有一些库基于一些原生代码实现，你必须把这些文件添加到你的应用，否则应用会在你使用这些库的时候产生报错。

手动链接原生库请看官网..................

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!