react native之进阶(一)

前端之家收集整理的这篇文章主要介绍了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它们就可以使用了。另外有一些库基于一些原生代码实现,你必须把这些文件添加到你的应用,否则应用会在你使用这些库的时候产生报错。

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

原文链接:https://www.f2er.com/react/302684.html

猜你在找的React相关文章