开发资料
使用工具
- Visual Studio // 开发react
- Android Studio // 安卓开发神器
- Git
- nodejs
- Flow // 静态的JS类型检查工具
和原生交互
应用场景多，主要是js扩展功能调用Native实现。
官方文档有介绍，主要注意下@ReactMethod 参数类型与js映射关系。
Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array
WriteableMap和Java中map使用基本一样。
native 通知js
应用场景：网络状态改变、用户登录状态、新消息（push）等等Native实现的功能，收到对应数据后需通知js。
Android 端伪代码
...
private void sendEvent(ReactContext reactContext,
String eventName,
@Nullable WritableMap params) {
reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
...
WritableMap params = Arguments.createMap();
...
sendEvent(reactContext, "keyboardWillShow", params);
- js端 伪代码
import { DeviceEventEmitter } from 'react-native';
...
// 兼容 ios用法 start
import { NativeModules, NativeEventEmitter } from 'react-native';
const MedEventEmitter = new NativeEventEmitter(NativeModules.MLRCTEventEmitter);
// 兼容 ios用法 end
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
componentWillMount: function() {
...
this.addListenerOn(DeviceEventEmitter,
'keyboardWillShow',
this.scrollResponderKeyboardWillShow);
...
},
scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
}
app进入RN界面分发
- 应用场景：如果是App部分功能使用了rn，不同模块进入的页面就会不一样。（纯rn项目，不用考虑这个。）
- js端使用 NavigationNavigator 等'react-navigation'模块实现。
- native 通过bundle传入数据，区分moduleName和routerName，供react解析。
控制台常用命令
$ npm start //开启本地服务
$ npm install //安装组件
$ react-native log-ios
$ react-native log-android
生成jsbundle文件
React-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
配置打包脚本
一行命令生成bundle并完成打包。
Makefile脚本实现
out := ios/JSBoudle/* android/app/src/main/assets/index.android.bundl*
version := 1.0.0
appName := xxx
.PHONY : all ios android
all: ios android
ios:
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/JSBoudle/main.jsbundle --assets-dest ./ios/JSBoudle
droidBundle:
react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
droidRelease:
cd android && ./gradlew clean assembleReleaseChannels -PchannelList=medlinker
iosRelease: ios push
android: droidBundle droidRelease
clean:
rm -rf $(out)
Mac终端直接执行：make android 就ok。
Python脚本（主要为兼容windows）
import os
import sys
import platform
# 先拉取两个项目代码
print('update git repo start')
os.system('git pull')
os.system('cd android && git pull')
print('update git repo end')
print('gradle release apk file all channels ? ', 'all' in sys.argv)
# 区分平台执行打包任务
sysstr = platform.system()
cmdPrefix = './gradlew'
if(sysstr =="Windows"):
print ("Call Windows tasks")
cmdPrefix = 'gradlew'
elif(sysstr == "Linux"):
print ("Call Linux tasks")
else:
print ("Other System tasks")
if 'all' in sys.argv:
os.system('cd android && %s clean assembleReleaseChannels' %(cmdPrefix))
else:
os.system('cd android && %s clean assembleReleaseChannels -PchannelList=medlinker' %(cmdPrefix))
看到了吧，Python更加灵活，打包前先同步远程仓库代码，再分平台打包。（这是由于对Makefile不熟悉，才这样搞的，囧~）
自定义react UI组件
- 使用场景：炫酷的自定义view、动效、触摸滑动事件等高级UI，需要Native来实现，然后封装给js使用。
- 参考官方文档 看有文档胜过搜索。
热更新方案
我们使用的 Microsoft/react-native-code-push，有没有惊讶到，微软咋搞这个呢？是的，说实话，还搞的不错。已在线上使用两次热更新，效果不错。
动画效果实现Lottie for React-Native
iOS上表现不错，安卓上内存偏高，卡顿。（低端机上明显）
js View截图react-native-view-shot
遇到的坑
-
版本兼容问题
reactnative更新很快，我们上个版本开发是0.51.0，现在已经是0.53.RC。建议使用最新版，很多第三方库也不支持旧版本，尤其是0.49.0之前版本。
xxx uncompiled PNG file passed as argument. Must be compiled first into .flat file.
android/app/build/intermediates/res/merged/release/drawable-mdpi-v4/xxx.png
Error:error: Duplicate file. --- 删除react-native生成的所有资源。
建议：遇到问题先看官方文档，不行再Google，基本都能找到答案。
总结
由于公司战略需要，我们项目尝试接入reactnative，部分新功能就开始使用rn来开发，本文就是对Android端开发rn过程的记录，包括使用了那些黑科技、踩过那些坑，希望对正在接入或者准备接入rn开发的你有帮助。
本文为原创内容，转载请说明出处，首发博客。
