坑中速记整理! 使用 kotlin 写第一个 ReactNative Android 模块

Posted iOS122

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了坑中速记整理! 使用 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 .


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

28

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 参数,主要用来辨别是否卡住.


1

2

3

4

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 一类的错误,又必须解决的话,可以尝试查看依赖关系,看到底是哪里在冲突:

命令是:


1

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


可能的输出:


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

28

29

30

31

32

33

34

35

36

37

38

39

40

+--- 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 的速度非常快,是更好的选择.

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


1

adb reverse tcp:8081 tcp:8081


  • 遇到诡异的问题时,可以尝试先: clean build

源码参考:

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

参考文章

  • Init project hangs forever


以上是关于坑中速记整理! 使用 kotlin 写第一个 ReactNative Android 模块的主要内容,如果未能解决你的问题,请参考以下文章

Retrofit--记使用Retrofit时遇到的一个坑

kotlin 遇到的问题

Android Kotlin 开发踩坑之旅

R中速率变量的回归

那些年写Kotlin遇到的各种坑,您需要收藏啦

kotlin协程async await的异常踩坑以及异常处理的正确姿势