react-native

React Native 是由Facebook发布的开源框架，React Native 的宗旨是,学习一次,高效编写跨平台原生应用;

React Native 与 native如何交互

注：函数不能有返回值，因为被调用的原生代码是异步的，原生代码执行结束之后只能通过回调函数或者发送消息给rn那边
1、React Native的RCTDeviceEventEmitter，通过消息机制来实现

  componentWillMount(){
    DeviceEventEmitter.addListener('AndroidToRNMessage',this.handleAndroidMessage);
  }
 
  componentWillunMount(){
     DeviceEventEmitter.remove('AndroidToRNMessage',this.handleAndroidMessage);
}

handleAndroidMessage(msg){
//RN端获得native端传递的数据
}

2、Callback机制(异步调用，多次调用会出现问题)

// NativeModule
···
@ReactMethod
public void nativeFun(Callback errorCallback, Callback successCallback){
		try {
            successCallback.invoke(100, 100, 200, 200);
        } catch (IllegalViewOperationException e) {
            errorCallback.invoke(e.getMessage());
        }
}
NativeModules.NativeModule.nativeFun()

3、Promise机制-等待态（Pending）、完成态（Fulfilled）和拒绝态（Rejected）

// NativeModule
···
@ReactMethod
public void nativeFun(String msg, Promise promise){
		try {
            Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
            String componentName = getCurrentActivity().getComponentName().toString();
            promise.resolve(componentName);
        }catch (Exception e){
            promise.reject("100",e.getMessage());
        }
}
NativeModules.NativeModule.nativeFun()

React Native 热更新

1、Rn如何处理bundle文件
1>app发版时，将bundle文件内置到app中，同时将图片和js文件内置到app中；
2>app在合适的时机，加载服务端最新的bundle文件

2、Rn 如何打bundle文件：react-native bundle
参数:
-h, --help
–platform [string] ios 或 andorid
–dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小
–entry-file RN入口文件的路径, 绝对路径或相对路径
–bundle-output bundle文件的输出路径
–assets-dest [string] 输出的asset资源目录
–prepack 当通过时, 打包输出将使用Prepack格式化
–bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
–sourcemap-output [string] 生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数
–verbose 显示打包过程
–reset-cache 移除缓存文件
–config [string] 命令行的配置文件路径

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundlejs --assets-dest android/app/src/main/res

React-native 使用 NodeJS环境

package.json/node_modules资源包
NPM是随同NodeJS一起安装的包管理工具，NPM建立了一个NodeJS生态圈
语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号