坑中速记整理! 使用 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

参考文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

ASP.NET 5系列教程(七)完结篇-解读代码

在本文中,我们将一起查看TodoController 类代码。 [Route] 属性定义了Controller的URL 模板: [Route("api/[con...

1895
来自专栏Java架构师历程

使用Spring Boot,JPA,Hibernate和Postgres的多租户应用程序

多租户是一种方法,应用程序实例由不同的客户使用,从而降低软件开发和部署成本,与单一租户解决方案相比,在这种解决方案中,需要触及多个部分以提供新客户端或更新现有租...

3923
来自专栏分布式系统进阶

Influxdb的Http请求处理流程

3.4 关键函数之s.serverTCP(),使用之前初始化的listener和handler启动真正的http服务

767
来自专栏坚毅的PHP

关于java

大整数10进制转16进制问题 google了都没什么好的解决方法,因为要转换的十进制有300多位,long都装不下,没有直接可用的函数可以拿来用 王总的方法分享...

3188
来自专栏Android 研究

Android跨进程通信IPC之8——Binder驱动

原本是没有这篇文章的,因为原来写Binder的时候没打算写Binder驱动,不过我发现后面大量的代码都涉及到了Binder驱动,如果不讲解Binder驱动,可能...

992
来自专栏蓝天

Thrift编译错误解决方法

下面这个错误可能是因为DOS(Windows)和Unix文件格式问题: checking whether g++ supports C++11 feature...

743
来自专栏熊二哥

快速入门系列--WebAPI--03框架你值得拥有

    接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5、单页应用程序SPA等技术和理念很...

5129
来自专栏后端之路

redis无法获取连接Could not get a resource from the pool分析

背景 随着系统使用用户上升,我们也愈发多的使用到了redis组件! 比如在做session共享时 tomcat使用redis做session 参考https:/...

41410
来自专栏Ryan Miao

安装好centOS5.5 后中文乱码

1.网页浏览的中文乱码 [root@localhost ~]# yum install fonts-chinese 下载完毕后,浏览器可以浏览中文网页。 2.应...

2749
来自专栏岑玉海

hbase源码系列(六)HMaster启动过程

  这一章是server端开始的第一章,有兴趣的朋友先去看一下hbase的架构图,我专门从网上弄下来的。   按照HMaster的run方法的注释,我们可以了解...

4259

扫码关注云+社区