安卓React-Native开发笔记（入门篇）

发表于 | 分类于 | 阅读次数:

开发资料

使用工具

  • Visual Studio // 开发react
  • Android Studio // 安卓开发神器
  • Git
  • nodejs
  • Flow // 静态的JS类型检查工具

和原生交互

应用场景多，主要是js扩展功能调用Native实现。
官方文档有介绍，主要注意下@ReactMethod 参数类型与js映射关系。

1
2
3
4
5
6
7
8
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 端伪代码

1
2
3
4
5
6
7
8
9
10
11
12
...
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端 伪代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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解析。

控制台常用命令

1
2
3
4
$ npm start //开启本地服务
$ npm install //安装组件
$ react-native log-ios
$ react-native log-android

生成jsbundle文件

1
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脚本实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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开发的你有帮助。

0%