摘要：在版本上，安卓系統(tǒng)上的渲染就有鋸齒，后來我們不分效果是使用圖片實現(xiàn)的，汗啊第三方組件不全。搖一搖問題的解決在我們使用了等狀態(tài)管理時，熱更新不會更新這些代碼，而頻繁搖一搖實在是太累了。此時可以使用此時相當于虛擬了一個搖一搖事件。

公司本年度有App任務(wù)，陸陸續(xù)續(xù)用RN開發(fā)了兩個應(yīng)用。一款是涉及儀器控制的平板項目，另一款是客戶端的App。下文談?wù)勈褂肦N開發(fā)的部分認知(其實只是隨便扯一扯，沒有什么深度)

其實能問出這個問題的我猜只有小公司了(比如我們)，因為大公司早已入坑，甚至已有公司出坑了(Airbnb)。

滿足需求變更的快速發(fā)版。原生代碼審核時間長，Hybird運行速度又不夠快。

很多小公司想不招移動開發(fā)而開發(fā)App，節(jié)約成本。

跨平臺，一份代碼，稍微改動部分就可以運行在兩個平臺上。

業(yè)務(wù)類代碼開發(fā)很快。

坑多，這個坑在方方面面。RN在0.5x版本上，安卓系統(tǒng)上的border渲染就有鋸齒，后來我們不分border效果是使用圖片實現(xiàn)的，汗啊~

第三方組件不全。RN作為一個有影響力開源項目，有很多第三方組件，但是可以毫不客氣的說，都不完美~ 無論是相機調(diào)用、音頻播放還是消息處理，甚至路由組件。很多組件需要修改源碼。因為這個組件依賴于RN0.4x，而另一個依賴于RN0.5x，這就特別尷尬。所以還是自己原生開發(fā)工程師提供接口，通過JS bridge調(diào)用比較好。

對前端來說，開發(fā)完整的App還是需要懂原生開發(fā)知識，對一般程序員來說Android開發(fā)用的Java還好，但是ios的開發(fā)語言O(shè)C簡直是魔咒。當然我們可以面向百度和Google編程，不過這會浪費大量的時間且做出來并不完美。所以，公司想做App的話還是至少需要一個懂Android開發(fā)和懂IOS開發(fā)的工程師。

屏幕適配，雖然RN的尺寸是相對尺寸，且提供了獲取屏幕密度等方法，但是具體到設(shè)備上，還是各有不同。不過相對輕松的是，我開發(fā)的平板項目只有一個尺寸，所以甚至可以使用定位來處理布局。

在使用react-native run-android之后，本質(zhì)是將Java等初始化代碼打成了一個包，后續(xù)開發(fā)和動態(tài)更新都是通過讀取在通過命令啟動的8081端口服務(wù)下的js bundle實現(xiàn)的，所以初次出現(xiàn)如下提示

Unable to load script from assets "index.android.bundle" ...

只需要搖一搖真機，在出現(xiàn)的dialog中設(shè)置Dev setting中的host、port再reload后就正常了

我是首次是通過Android 6.0開發(fā)，后來打算使用Android 5.1進行測試。錯誤信息如下

com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to install all

出現(xiàn)這種情況，網(wǎng)上很多說是通過修改gradle來進行修改，但是通常開發(fā)android程序時，需要測試不同的設(shè)備。可以直接使用adb命令進行安裝

adb install android/app/build/outputs/apk/app-debug.apk

特別是在使用了babel-resolver之后---，錯誤信息如下

unable to resolve module ***

解決方式：
react-native start --reset-cache

在使用command + /添加注釋后，經(jīng)常出現(xiàn)錯誤：

Cannot add a child node that doesn"t have a YogaNode to a parent without measure function

解決方式當然是檢查自己的JSX代碼是否注釋寫的不對。

在我們使用了Mobx Redux等狀態(tài)管理時，熱更新不會更新這些代碼，而頻繁搖一搖實在是太累了。此時可以使用

adb shell input keyevent 82

此時相當于虛擬了一個搖一搖事件。

當我們的開發(fā)環(huán)境可能有多種設(shè)備且不方便插USB得話，可以進行Adb遠程調(diào)試。方法如下：

1. 安卓端：首先安裝安卓終端模擬器
su
setprop service.adb.tcp.port 5555
stop adbd
start adbd
2. 開發(fā)端：
adb connect ANDROID_HOST
adb install ***.apk
需要喚出設(shè)置頁面的話，用上面的搖一搖問題的解決方案

以通過js獲取原生Android序列號為例，此處代碼會比官方文檔全。其他的可以參考官方文檔

在與android的MainActivity同級目錄下新建一個SerialNumberModule.java文件，內(nèi)容如下：

public class SerialNumberModule extends ReactContextBaseJavaModule{

    @Override
    public String getName() {
        return "SerialNumber";
    }

    public SerialNumberModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @ReactMethod
    public void getSerialNumber (Callback successCallback, Callback errorCallback) {
        String SerialNumber = android.os.Build.SERIAL;
        try {
            successCallback.invoke(SerialNumber);
        } catch (IllegalViewOperationException e) {
            errorCallback.invoke(e.getMessage());
        }
    }
}

在新建一個SerialNumberPackage.java文件，用來添加模塊，代碼如下：

public class SerialNumberPackage implements ReactPackage {
    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();

        modules.add(new SerialNumberModule(reactContext));

        return modules;
    }
}

在本目錄的MainApplication.java中重寫的getPackages中new此模塊，代碼：

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

js端調(diào)用，以rn的入口App.js為例

import { NativeModules } from "react-native"
*******
在組件內(nèi)：
componentWillMount () {
    NativeModules.SerialNumber.getSerialNumber(success => {
      console.log("success", success)
    }, err => {
      console.log("err", err)
    })
}
  

可以在項目根目錄下執(zhí)行

1. react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
2. 修改AppDelegate.m文件，將
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
注釋掉，并添加
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];
3. 將打好的文件在ios目錄下的bundle目錄里的兩個文件和一個文件夾拖拽到Xcode的項目相應(yīng)名字的目錄下
4. 插上真機，在Xcode的目標上選擇真機，點擊Xcode標題欄的product --> archive即可

先上結(jié)論，個人認為這種開發(fā)模式遲早會結(jié)束，第三方強行兼容設(shè)備總是不行的。類比黑莓兼容Android。個人還是信WEB, 信W3C。踩坑還在進行，上述只是一點開發(fā)經(jīng)驗。大神輕噴，同行人歡迎一起討論。