React Native爬过的坑

1、小米手机上跑RN，先去把开发者选项中的MIUI优化选项关闭掉；

2、在调试的时候，一enable remote JS debug就闪退，这个根本原因目前不知道是啥，控制台android和IOS也是输出了不一样的日志，到官网的issue上也没发现实质的解决方式，后来更新了下rn版本，重新npm install，又好了，这个要持续跟进；

3、react navigation reset的问题

在使用react navigation reset的时候，会导致component的生命周期执行多次，经过不断的排查，最终发现问题是在setparams上面，所以，如果在A页面要reset到B页面，而B页面又要进行setparam，那么，一定要进行适当的延时，否则，A的生命周期会执行多次。

    let that = this;
    this.timer = setTimeout(
      () => { 
        console.log("111111111111111111111111111111111111111")
        that.props.navigation.setParams({
          isCurrentTasks: that.state.isCurrentTasks,
          navigatePress: that.loadData,
        });
        that.timer && clearTimeout(that.timer);
      },300
    );

4、android建立原生组件，供reactnative调用

4.1）定义一个Module，集成ReactContextBaseJavaModule：

package com.study03.custommodules;

import android.widget.Toast;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.modules.storage.AsyncStorageModule;
import com.facebook.react.uimanager.PixelUtil;

import java.util.Map;

/**
 * @author LuoZheng
 * @date 2018/1/15 10:11
 */
@ReactModule(name = HelloModule.NAME)
public class HelloModule extends ReactContextBaseJavaModule {

    public static final String NAME = "HelloModule";
    private ReactContext context;

    public HelloModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.context = reactContext;
        notifyReactNative();
    }

    /**
     * 无需ReactNative调用，直接发送信息给ReactNative
     * @param eventName
     * @param params
     */
    public  void sendEvent(String eventName, WritableMap params) {
        context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
    }

    private void notifyReactNative(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(10 * 1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                WritableMap et= Arguments.createMap();
                et.putString("eventParams", "Hello Event");
                sendEvent("HelloEvent",et);
            }
        }).start();
    }

    /**
     * 这个是在reactnative引用的名字：
     * @return
     */
    @Override
    public String getName() {
        return NAME;
    }

    @Override
    public Map getConstants() {
        return super.getConstants();
    }

    /**
     * 参数类型Java -> JavaScript
     * Boolean -> Bool
     * Integer -> Number
     * Double -> Number
     * Float -> Number
     * String -> String
     * Callback -> function
     * ReadableMap -> Object
     * ReadableArray -> Array
     * @param message
     */
    @ReactMethod
    public void hello(String message){
        Toast.makeText(getReactApplicationContext(),message,Toast.LENGTH_LONG).show();
    }

    /**
     * 回调方式把结果返给react native
     * @param message
     * @param callback
     */
    @ReactMethod
    public void callback(final String message,final Callback callback){
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                callback.invoke(message + ",Hello Callback!");
            }
        }).start();
    }

    /**
     * Promise 方式把结果返回给React native
     * @param message
     * @param promise
     */
    @ReactMethod
    public void promise(final String message , final Promise promise){
        WritableMap map = Arguments.createMap();
        map.putString("result", message + ",Hello Promise");
        promise.resolve(map);
//        new Thread(new Runnable() {
//            @Override
//            public void run() {
//                try {
//                    Thread.sleep(5000);
//                } catch (InterruptedException e) {
//                    e.printStackTrace();
//                }
//                WritableMap map = Arguments.createMap();
//                map.putString("result", message + ",Hello Promise");
//                promise.resolve(map);
//            }
//        }).start();
    }
}

4.2) 创建一个ReactPackage：

package com.study03.custommodules;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * $Desc$
 *
 * @author LuoZheng
 * @date 2018/1/15 10:23
 */

public class HelloPackage implements ReactPackage {

    /**
     * 这个是用来返回特定的module
     * @param reactContext
     * @return
     */
    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List nativeModules = new ArrayList<>();
        nativeModules.add(new HelloModule(reactContext));
        return nativeModules;
    }

    /**
     * 这个用来指定特定module的一些view属性配置信息
     * @param reactContext
     * @return
     */
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

4.3) 在ReactNativeHost中注册package：

 @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
              new HelloPackage()
      );
    }

4.4) module 导出：

import React, { Component } from 'react'
import { NativeModules } from 'react-native'

module.exports = NativeModules.HelloModule;

4.5)使用：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  DeviceEventEmitter,
} from 'react-native';

import HelloModule from './Hello'

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});

export default class App extends Component {

  componentDidMount() {
    HelloModule.hello("Hello React Native World !");

    // Callback 回调方式获取Native结果
    HelloModule.callback("你好",
      (message) => {
        console.log("@@@@@@@@@@@@@ 111:" + message);
      }
    );

    // Native 主动向ReactNative发送消息
    DeviceEventEmitter.addListener("HelloEvent", function (event) {
      console.log("@@@@@@@@@@@@@ 222:%O", event)
    });
  }

  /**
   * async 标识promiseTest是一个异步方法
   */
  async promiseTest() {

    // await 表示要等到promise方法执行结束之后，才会往后执行
    // Promise 方式获取Native结果
    let { result } = await HelloModule.promise("你好");

    console.log("@@@@@@@@@@@@@ 333:" + result);

  }

  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit App.js
        
        
          {instructions}
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});