ReactNative小知识

React Native学习（Android）——小知识

一、工具类的书写

组件不一定非要有可视化的界面，也可以是没有界面的类。
通过*面的组件可以实现工具类。
具体如下：

import React, {Component} from 'react';
export default class MyUtil extends Component {
    static strToJson(data) {
        return JSON.parse(data);
    }
    ...
}

通过继承Component，使得MyUtil成为一个"组件"，类似于黑盒子，组件内部利用static编写静态属性、方法，从而供外界调用，
如果将这个"工具类"在index.js中引入，则成为全局属性和方法。
全局属性和方法可以使用“global”，用法在 Global.js 中global是RN全局使用的一个关键字

二、react-native-shadow的使用

1. 添加：

    react-native-shadow
    react-native-svg
   

2. 关联：

    react-native link react-native-svg
   

3. 检查：

   3.1 setting.gradle

    include ':react-native-svg'
    project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
   

   3.2 app/build.gradle

    implementation project(':react-native-svg')
   

   3.3 MainApplication.java

    getPackages()中是否添加了 new SvgPackage()
   

4. 如果不行的话：

    删除 node_modules 再 npm install
   

5. 引入

    import {BoxShadow} from 'react-native-shadow'
   

6. 配置

    const shadowOpt = {
        width:160,
        height:170,
        color:"#000",
        border:2,
        radius:3,
        opacity:0.2,
        x:0,
        y:3,
        style:{marginVertical:5}
    }
   

7. 使用

    <BoxShadow setting={shadowOpt}>
        <TouchableHighlight style={{
            position:"relative",
            width: 160,
            height: 170,
            backgroundColor: "#fff",
            borderRadius:3,
            // marginVertical:5,
            overflow:"hidden"}}>
            …………………………
        </TouchableHighlight>
    </BoxShadow>
   

三、Promise 的使用

一个 Promise 就是一个对象，它代表了一个异步操作的最终完成或者失败

本质上，Promise 是一个绑定了回调的对象，而不是将回调传进函数内部

let promise = new Promise((resolve, reject) => {
    resolve(new AttributeInfo(x, y, width, height, pageX, pageY));
    reject("我是一个error");
});

then(function1,function2) // 第一个参数为成功时的执行函数，第二个参数为失败时的执行函数

catch(function) // 只要前面Promise有任何一个执行失败，立即终止所有的Promise的执行，并马上进入catch中去处理Promise中抛出的异常。

promise
.then((data) => {// resolve}, (error) => { // rejection})
.catch(function (error) {console.log(error);});

1. all用法：提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调，all方法的效果实际上是「谁跑的慢，以谁为准执行回调」

    Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });
   

2. race用法：那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」

    Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });
   

四、Global 的使用

Global.js

import {Dimensions} from 'react-native';

const UI_STANDARD = 375;

class Config {
    static fontSizeDefault = 14;     // 字体
    static colorDefault = '#FFFFFF'; // 颜色
    static sizeMarginDefault = 10;   // 尺寸
    static bottomBarSize = 25;
    static deviceWidth = Dimensions.get('window').width;
}

const Log = (...params) => { // 全局 Log
    if (GLOBAL.__DEV__) {
        console.log(params);
    }
};

import Api from './pages/utils/Api'; 					// 全局 api
import JsonUtil from './pages/utils/JsonUtil';
import BaseComponent from './pages/utils/BaseComponent';// 基类
import TimeUtil from './pages/utils/TimeUtil';
import AttributeUtil from './pages/utils/AttributeUtil';

// 导出
global.Log = Log;
global.Api = Api;
global.Config = Config;
global.JsonUtil = JsonUtil;
global.TimeUtil = TimeUtil;
global.BaseComponent = BaseComponent;
global.AttributeUtil = AttributeUtil;