初识ReactNative及个别实用组件

简述

我是在17年10月份开始接触ReactNative的，当时是听同事说这个语言的开发效率很高，兼容性还不错，恰好公司不是很忙，自己就抽空开始学习React。到目前为止用ReactNative开发了两个项目，感觉ReactNative在开发时确实很实用，就写篇文章，把自己的一些心得和搜集的资料分享一下。每一个程序员都要有开源分享精神 :-D

网站

React Native 中文网 https://reactnative.cn/
ECMAScript 6 入门 http://es6.ruanyifeng.com/
React 教程 http://www.runoob.com/react/react-tutorial.html
npm https://www.npmjs.com/
React/React Native 的ES5 ES6写法对照表 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

第三方库（这些库都可以在GitHub或者npm上搜索到）

"react-native-md5": "^1.0.0",//用于md5加密
"react-native-sqlite-storage": "^3.3.4",//数据库操作
"react-native-storage": "^0.2.2",//本地存储
"jwt-decode": "^2.2.0",//解析jsonwebtoken
"xmldom": "^0.1.27"//处理xml文本
react-native-loading-view //加载遮罩loading
react-native-easy-toast //提示文字视图
npm i react-native-swiper --save //轮播图

console.log的封装

export default class Logger{
    //是否开启日志，true开启,false关闭
    static isDebugger=true;
    static log(obj){
        if(this.isDebugger){
            console.log(obj);
        }
    }

    static warn(obj){
        if(this.isDebugger){
            console.warn(obj);
        }
    }
}

使用方法 Logger.log(obj); Logger.warn(obj);

观察者（广播）组件 可以多个页面同时监听同一事件

/**
 * 全局的监听对象（多线程 高并发的时候可能会有问题 未处理并发情景）
 * 可以多个页面同时监听同一事件
 * componentWillUnmount时或者不需要监听时进行反注册  不执行该步骤否则将导致内存泄漏
 *
 */

class Observer {
    constructor() {
        this.observers = new Map();
    }
    /**
     * 获取注册监听对象的实例
     * @returns {*}
     */
    static getInstance() {
        if (global.observerInstance == undefined) {
            global.observerInstance = new Observer();
        }
        return global.observerInstance;
    }

    /**
     * 注册观察
     * @param key 观察对象类型的可以值（使用字符串表示），不同的key表示监听不同事件  多个地方可以监听同一事件
     * @param callback
     */
    register(key, callback) {
        let observers = global.observerInstance.observers;
        if (observers.has(key)) {
            let listeners = observers.get(key);
            if (!listeners.includes(callback)) {
                listeners.push(callback);
            }
        } else {
            observers.set(key, [callback]);
        }
    }

    /**
     * 通知
     * @param key 观察对象类型的可以值（使用字符串表示 使用注册时传入的值）
     * @param parameters 通知时传递的参数
     */
    notify(key, parameters) {
        let observers = global.observerInstance.observers;
        if (observers.has(key)) {
            let listeners = observers.get(key);
            for (callback of listeners) {
                callback(parameters);
            }
        }
    }

    /**
     *  componentWillUnmount时或者不需要监听时进行反注册  不执行该步骤否则将导致内存泄漏
     * @param key 观察对象类型的可以值（使用字符串表示 使用注册时传入的值）
     * @param callback 传入注册时传入的回调对象
     */
    unRegister(key, callback) {
        let observers = global.observerInstance.observers;
        if (observers.has(key)) {
            let listeners = observers.get(key);
            let index = listeners.indexOf(callback);
            if (index != -1) {
                listeners.splice(index, 1);
            }
        }
    }
}

/**
 * Observer通知对象类型定义
 */
class ObserverConstant {
    static type = {
        loginSuccess: "loginSuccess",//监听登录成功的key
    }
}

module.exports={Observer,ObserverConstant}

观察者（广播）组件的使用

    componentDidMount(){
        //注册监听当登录后，重新请求 刷新用户的信息
        Observer.getInstance().register(ObserverConstant.type.loginSuccess,this.requestUserInfoData);
    }
    componentWillUnmount(){
        //移除监听
        Observer.getInstance().unRegister(ObserverConstant.type.loginSuccess,this.requestUserInfoData);
    }
    requestUserInfoData = ()=>{
        Logger.log('请求用户信息');
    }

发广播

//登录成功发送通知
Observer.getInstance().notify(ObserverConstant.type.loginSuccess);