開發(fā)資料

• 官方文檔
• 中文文檔

使用工具

• Visual Studio // 開發(fā)react
• Android Studio // 安卓開發(fā)神器
• Git
• nodejs
• Flow // 靜態(tài)的JS類型檢查工具

和原生交互

應(yīng)用場景多，主要是js擴展功能調(diào)用Native實現(xiàn)。
官方文檔有介紹，主要注意下@ReactMethod 參數(shù)類型與js映射關(guān)系。

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

WriteableMap和Java中map使用基本一樣。

native 通知js

• 應(yīng)用場景：網(wǎng)絡(luò)狀態(tài)改變、用戶登錄狀態(tài)、新消息（push）等等Native實現(xiàn)的功能，收到對應(yīng)數(shù)據(jù)后需通知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進(jìn)入RN界面分發(fā)

• 應(yīng)用場景：如果是App部分功能使用了rn，不同模塊進(jìn)入的頁面就會不一樣。（純rn項目，不用考慮這個。）
• js端使用 NavigationNavigator 等'react-navigation'模塊實現(xiàn)。
• native 通過bundle傳入數(shù)據(jù)，區(qū)分moduleName和routerName，供react解析。

控制臺常用命令

$ npm start //開啟本地服務(wù)
$ 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腳本實現(xiàn)

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終端直接執(zhí)行：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)

# 區(qū)分平臺執(zhí)行打包任務(wù)
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更加靈活，打包前先同步遠(yuǎn)程倉庫代碼，再分平臺打包。（這是由于對Makefile不熟悉，才這樣搞的，囧~）

自定義react UI組件

• 使用場景：炫酷的自定義view、動效、觸摸滑動事件等高級UI，需要Native來實現(xiàn)，然后封裝給js使用。
• 參考官方文檔 看有文檔勝過搜索。

熱更新方案

我們使用的 Microsoft/react-native-code-push，有沒有驚訝到，微軟咋搞這個呢？是的，說實話，還搞的不錯。已在線上使用兩次熱更新，效果不錯。

• code-push 使用指南
• 中文文檔

動畫效果實現(xiàn)Lottie for React-Native

iOS上表現(xiàn)不錯，安卓上內(nèi)存偏高，卡頓。（低端機上明顯）

js View截圖react-native-view-shot

遇到的坑

• 版本兼容問題

  reactnative更新很快，我們上個版本開發(fā)是0.51.0，現(xiàn)在已經(jīng)是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，基本都能找到答案。

總結(jié)

由于公司戰(zhàn)略需要，我們項目嘗試接入reactnative，部分新功能就開始使用rn來開發(fā)，本文就是對Android端開發(fā)rn過程的記錄，包括使用了那些黑科技、踩過那些坑，希望對正在接入或者準(zhǔn)備接入rn開發(fā)的你有幫助。

本文為原創(chuàng)內(nèi)容，轉(zhuǎn)載請說明出處，首發(fā)博客。