坑中速記整理! 使用 kotlin 寫第一個 ReactNative Android 模塊

Kotlin 和 Swift, 兩大新寵! 借 ReactNative 熟悉下 kotlin 的用法,不料掉坑里面了.昨晚花了大半夜,趁這會兒思路清晰,把涉及到的一些關鍵信息,迅速整理下.

最佳的使用 Kotlin 快速開始寫Android模塊的方式

1. react-native init AwesomeProject 生成的 android 目錄,是一個標准的 Android Studio 工程,詳見: http://facebook.github.io/react-native/docs/getting-started.html
2. 直接在 Android Studio 中打開 AwesomeProject/android 目錄.
3. 參考文章 http://facebook.github.io/react-native/docs/native-modules-android.html,先用 java 實現
4. 頂部菜單 --> code --> Convert Java File to Kotlin File ,自動轉換為 kotlin .

package com.awesomeproject.AnExampleReactPackage

import android.widget.Toast

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

import java.util.HashMap

/**
 * Created by yanfeng on 2017/10/12.
 */

class ToastModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String {
        return "ToastExample"
    }

    override fun getConstants(): Map<String, Any>? {
        val constants = HashMap<String, Any>()
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT)
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG)
        return constants
    }

    @ReactMethod
    fun show(message: String, duration: Int) {
        Toast.makeText(reactApplicationContext, message, duration).show()
    }

    companion object {

        private val DURATION_SHORT_KEY = "SHORT"
        private val DURATION_LONG_KEY = "LONG"
    }
}

一些坑中的經驗

• 如果 ReactNative 初始化慢,可以改用淘寶源,后面的 --verbose 參數,主要用來辨別是否卡住.

npm install -g nrm
nrm use taobao
npm install -g react-native-cli --verbose
react-native init AwesomeProject --verboses

• RN 與已有項目集成的原理是,把已有的 Android 項目復制到 android 文件夾,然后改下配置.

• 如果沒有已有的運行良好的項目,不要嘗試用 Android Studio 直接新建項目,因為 Android Studio 的默認 SDK 版本(25.3.1) 和 ReactNative 的SDK版本(23.0.1) 不一致,所以在根據 RN 文檔,改配置,會遇到各種問題.如果非要模擬,建議直接基於 AwesomeProject/android 這個項目改.

• 改淘寶源,可以加快速度,但是每次安裝還是需要 20~40 分鍾(取決於網絡環境等).如果本地再起一個 sinopia ,這樣第二次初始化 RN 時,只需要 3 ~ 5 分鍾.詳見: https://github.com/rlidwka/sinopia

• 如果遇到 All com.android.support libraries must use the exact same version specification 一類的錯誤,又必須解決的話,可以嘗試查看依賴關系,看到底是哪里在沖突:

命令是:

./gradlew -q dependencies app:dependencies --configuration compile

可能的輸出:

+--- com.android.support.constraint:constraint-layout:1.0.0-beta2
|    \--- com.android.support.constraint:constraint-layout-solver:1.0.0-beta2
\--- com.facebook.react:react-native:+ -> 0.20.1
     +--- com.google.code.findbugs:jsr305:3.0.0
     +--- com.facebook.stetho:stetho-okhttp:1.2.0
     |    +--- com.google.code.findbugs:jsr305:2.0.1 -> 3.0.0
     |    +--- com.facebook.stetho:stetho:1.2.0
     |    |    +--- com.google.code.findbugs:jsr305:2.0.1 -> 3.0.0
     |    |    \--- commons-cli:commons-cli:1.2
     |    \--- com.squareup.okhttp:okhttp:2.2.0 -> 2.5.0
     |         \--- com.squareup.okio:okio:1.6.0
     +--- com.squareup.okhttp:okhttp-ws:2.5.0
     |    \--- com.squareup.okhttp:okhttp:2.5.0 (*)
     +--- com.facebook.fresco:fresco:0.8.1
     |    +--- com.facebook.fresco:imagepipeline:0.8.1
     |    |    +--- com.nineoldandroids:library:2.4.0
     |    |    +--- com.facebook.fresco:fbcore:0.8.1
     |    |    +--- com.android.support:support-v4:21.0.3 -> 23.0.1
     |    |    |    \--- com.android.support:support-annotations:23.0.1
     |    |    \--- com.parse.bolts:bolts-android:1.1.4
     |    +--- com.facebook.fresco:fbcore:0.8.1
     |    \--- com.facebook.fresco:drawee:0.8.1
     |         +--- com.facebook.fresco:fbcore:0.8.1
     |         \--- com.android.support:support-v4:21.0.3 -> 23.0.1 (*)
     +--- org.webkit:android-jsc:r174650
     +--- com.fasterxml.jackson.core:jackson-core:2.2.3
     +--- com.squareup.okhttp:okhttp:2.5.0 (*)
     +--- com.facebook.fresco:imagepipeline-okhttp:0.8.1
     |    +--- com.squareup.okhttp:okhttp:2.3.0 -> 2.5.0 (*)
     |    +--- com.facebook.fresco:imagepipeline:0.8.1 (*)
     |    \--- com.facebook.fresco:fbcore:0.8.1
     +--- com.squareup.okio:okio:1.6.0
     +--- com.android.support:recyclerview-v7:23.0.1
     |    +--- com.android.support:support-v4:23.0.1 (*)
     |    \--- com.android.support:support-annotations:23.0.1
     +--- com.facebook.stetho:stetho:1.2.0 (*)
     \--- com.android.support:appcompat-v7:23.0.1
          \--- com.android.support:support-v4:23.0.1 (*)

(*) - dependencies omitted (listed previously)

• kotlin,會自動引入庫; java,點擊提示不存在的類,然后使用 Alt + 回車 也可以快速引入.

• RN 的文檔可能是錯的.如果提示方法名總是不對,可以嘗試下手動輸入,看下提示,可能真的變了.

• 執行 react-native run-android 可能比在 Android Studio 中運行方便;但是第二次執行原生 Android 代碼時, Android Studio Run Build 的速度非常快,是更好的選擇.

• 如果是真機,可能需要:

adb reverse tcp:8081 tcp:8081

• 遇到詭異的問題時,可以嘗試先: clean build

源碼參考:

https://github.com/ios122/kotlin-module-sample-for-reactnative

參考文章

• Init project hangs forever