React-Native 真的是移動開發的將來嗎

公司本年度有App任務，陸陸續續用RN開發了兩個應用。一款是涉及儀器控制的平板項目，另外一款是客戶端的App。下文談談使用RN開發的部分認知(其實只是隨便扯一扯，沒有什麼深度)

咱們適合使用RN嗎？

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

RN的優點

• 知足需求變動的快速發版。原生代碼審覈時間長，Hybird運行速度又不夠快。
• 不少小公司想不招移動開發而開發App，節約成本。
• 跨平臺，一份代碼，稍微改動部分就能夠運行在兩個平臺上。
• 業務類代碼開發很快。

RN的弊端

• 坑多，這個坑在方方面面。RN在0.5x版本上，安卓系統上的border渲染就有鋸齒，後來咱們不分border效果是使用圖片實現的，汗啊~
• 第三方組件不全。RN做爲一個有影響力開源項目，有不少第三方組件，可是能夠絕不客氣的說，都不完美~ 不管是相機調用、音頻播放仍是消息處理，甚至路由組件。不少組件須要修改源碼。由於這個組件依賴於RN0.4x，而另外一個依賴於RN0.5x，這就特別尷尬。因此仍是本身原生開發工程師提供接口，經過JS bridge調用比較好。
• 對前端來講，開發完整的App仍是須要懂原生開發知識，對通常程序員來講Android開發用的Java還好，可是ios的開發語言OC簡直是魔咒。固然咱們能夠面向百度和Google編程，不過這會浪費大量的時間且作出來並不完美。因此，公司想作App的話仍是至少須要一個懂Android開發和懂IOS開發的工程師。
• 屏幕適配，雖然RN的尺寸是相對尺寸，且提供了獲取屏幕密度等方法，可是具體到設備上，仍是各有不一樣。不過相對輕鬆的是，我開發的平板項目只有一個尺寸，因此甚至可使用定位來處理佈局。

開發中的經驗

配置完RN環境，以安卓爲例

在使用react-native run-android以後，本質是將Java等初始化代碼打成了一個包，後續開發和動態更新都是經過讀取在經過命令啓動的8081端口服務下的js bundle實現的，因此初次出現以下提示

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

只須要搖一搖真機，在出現的dialog中設置Dev setting中的host、port再reload後就正常了

因Android版本問題致使的沒法安裝

我是首次是經過Android 6.0開發，後來打算使用Android 5.1進行測試。錯誤信息以下

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

出現這種狀況，網上不少說是經過修改gradle來進行修改，可是一般開發android程序時，須要測試不一樣的設備。能夠直接使用adb命令進行安裝

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

緩存問題

特別是在使用了babel-resolver以後---，錯誤信息以下

unable to resolve module ***

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

JSX註釋語法

在使用command + /添加註釋後，常常出現錯誤：

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

解決方式固然是檢查本身的JSX代碼是否註釋寫的不對。

搖一搖問題的解決(Android)

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

adb shell input keyevent 82

此時至關於虛擬了一個搖一搖事件。

遠程調試(root設備)

當咱們的開發環境可能有多種設備且不方便插USB得話，能夠進行Adb遠程調試。方法以下：

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

JS調用Android代碼

以經過js獲取原生Android序列號爲例，此處代碼會比官方文檔全。其餘的能夠參考官方文檔

• 在與android的MainActivity同級目錄下新建一個SerialNumberModule.java文件，內容以下：

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<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

        modules.add(new SerialNumberModule(reactContext));

        return modules;
    }
}

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

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

• js端調用，以rn的入口App.js爲例

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

發行IOS包

能夠在項目根目錄下執行

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的項目相應名字的目錄下
4. 插上真機，在Xcode的目標上選擇真機，點擊Xcode標題欄的product --> archive便可

先上結論，我的認爲這種開發模式早晚會結束，第三方強行兼容設備老是不行的。類比黑莓兼容Android。我的仍是信WEB, 信W3C。踩坑還在進行，上述只是一點開發經驗。大神輕噴，同行人歡迎一塊兒討論。