Kotlin 能用来开发 React Native 吗？

怼烎@ 2022-04-25 07:38 282阅读 0赞

## 0. 引子 ##

前段时间出去休了半个月假，公众号文章史无前例的断了一周，不过不要紧，我这不是又回来了嘛。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg]

> 摄于：**清境农场**

闲话少说，既然 Kotlin 可以编译为 Js，那么我们很容易就可以用它去做前端或者 Nodejs 开发。目前官方也已经给出了 React 的 Demo，惊得我只好给大婶儿们双击 666 啊。

## 1. 死于黎明前的黑暗 ##

既然 React 都有 Demo 了，那么问题来了，居然到现在了，都还没有一个能跑起来的 React Native 的 Demo，不合理啊，甚至连官方的人都说：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 1]

> 扎心了老铁！你贴的可是去年 4 月份的对话，专业点儿行不？

好啊，那我给你们看看 Slack：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 2]

这段话翻译成中文那就是：哥啊，kotlin 搞 react-native 到底靠不靠谱啊，react-native 打包的时候看到 kotlin.js 直接就挂机了啊。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 3]

> 每次看到这个界面我都想说嗷个大头鬼啊。。

我随后翻了翻 React-Native 的 issue，发现：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 4]

我当时还觉得这哥们肯定打开方式不对啊，后来仔细瞅了瞅下面的问题描述，我觉得它可以跟前面 Slack 上的兄弟握个爪了，亲切地。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 5]

你没看错，这哥们的代码就只有引入 Kotlin 这么一行，然后 React-Native 的 打包工具就得累死累活的搞，10分钟后直接超时。。

你以为闹着玩呢？仔细一看 Kotlin.js 行数居然真的这么多！

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 6]

我靠，以后我看谁还敢在他的网页里面引入这东西。。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 7]

说白了就是 KotlinJs 的标准库太大了，成了 React Native 的 bundle 工具无法逾越的一道鸿沟。。

## 2. 还记得当年 64K 旁边的 Proguard 么？ ##

其实我也踩到了这个坑啊，在出去休假前曾花了两个晚上琢磨怎么编译这东西，无解。后来在外面浪的时候，坐在沙滩上看着海浪轻轻的拍，好美啊。。啊，然后它就拍在了我的大胖脸上，当时脑子里面就闪过 slap、smack。。。额，对，我怎么没去 slack 上面问问呢。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 8]

然后几分钟后就有大神回复：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 9]

他这一句犹如醍醐灌顶，我瞬间想到，完了，衣服都湿了没得换可咋办。。

开玩笑啦。这里顺便提一句，这个 Slack 真心不错，里面还能看到 Jake Wharton 最近也在踩一些 KotlinJs 的坑呢。

我们先来说说 DCE，这个东西的功能有点儿类似大家很熟悉的 Proguard 中去除没有引用到的代码的功能，就是传说中的 Shrink 啦。显然，Kotlinjs 标准库里面的那 37k 代码我们不可能完全用到，例如我就写了下面一点儿代码给 React Native 代码用：

1.  `package com.bennyhuo.rnkt`
2.  ``
3.  `@JsName("hello")`
4.  `fun hello() = "I'm a String from Kotlin!"`

标准库里的代码根本用不到好伐。

1.  `import React, { Component } from 'react';`
2.  `import {`
3.  ` AppRegistry,  Text,  View`
4.  `} from 'react-native';`
5.  `import HelloKotlinJs from "./rnkt/output/min/rnkt"`
6.  ``
7.  `class HelloWorld extends Component {`
8.  ` render() {`
9.  `   React.createElement`
10. `   return <View>`
11. `     <Text>{ HelloKotlinJs.com.bennyhuo.rnkt.hello()}</Text>`
12. `   </View>`
13. ` }`
14. `}`

这种情况下，我们只需要告诉 DCE，给我留着 `hello` 这个函数，其他用不到的都丢掉就好啦。

除了基本的 js 编译的配置，我们再加上下面两句：

1.  `apply plugin: 'kotlin-dce-js'`
2.  `runDceKotlinJs.keep 'rnkt.com.bennyhuo.rnkt.hello'`

> rnkt 是我编译 js 输出的模块名，后面就是是报名和函数名了。

编译之后 kotlinjs 标准库变成什么样了呢？

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 10]

只有 2k 行了哦！有没有很腻害！运行结果就是下面酱紫：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 11]

## 3. 能给我来一个 Component 么？ ##

OK，我们其实已经把 KotlinJs 运用到了 React-Native 上面了，不过这时候肯定有人不服：能写 JSX 么？答案当然是不能啊。那不能写 JSX 的话要怎么实现 Component 呢？

实际上 JSX 不过也是一些函数调用罢了，给大家看例子：

1.  `package com.bennyhuo.rnkt`
2.  `@JsModule("react")`
3.  `external object React{`
4.  `   open class Component`
5.  ``
6.  `   fun createElement(vararg args: dynamic)`
7.  `}`
8.  ``
9.  `@JsModule("react-native")`
10. `external object ReactNative{`
11. `   val Text: dynamic`
12. `}`
13. ``
14. `class HelloKotlinJs: React.Component(){`
15. `   fun render(): dynamic{`
16. `   // 这里就相当于 <Text>I'm a Component from Kotlin!!!</Text>`
17. `       return React.createElement(Text, null, "I'm a Component from Kotlin!!!")`
18. `   }`
19. `}`

这时候需要注意了，我们还需要加点儿配置以防 DCE 把这些类给干掉：

1.  `runDceKotlinJs.keep "rnkt.com.bennyhuo.rnkt.HelloKotlinJs",`
2.  `       "rnkt.com.bennyhuo.rnkt.HelloKotlinJs.render"`

这样我们就定义了一个 Component，在 Js 当中我们就可以这么用这个组件：

1.  `class HelloWorld extends Component {`
2.  ` render() {`
3.  `   return <View><HelloKotlinJs.com.bennyhuo.rnkt.HelloKotlinJs/></View>`
4.  ` }`
5.  `}`

如果嫌名字难看，那么你也可以选择把包名去掉。运行结果如下：

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 12]

这时候我们用 Kotlin 写的那个 Component 渲染出来了。

## 4. 为什么要用 Kotlin 写 React Native? ##

尽管我们能实现功能，不过肯定有人要吐槽了，费了半天劲儿，结果用 Kotlin 写 React Native 就是这个鬼样子？简直费力不讨好啊。

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 13]

用 Kotlin 写 React Native 程序当然不是目的，Js 挺好用的啊，为什么要让我换？但如果我手头有一个用 Kotlin 编写的算法模块想要移植到 React Native 或者其他 JavaScript 运行环境，移植起来就会轻松许多。

所以还是那句话，总是讨论替代谁是没有意义的，在给定特定的需求场景时，Kotlin 全栈的能力只是为我们多了一种选择。

--------------------

欢迎关注微信公众号 Kotlin

![0?wx\_fmt=jpeg][0_wx_fmt_jpeg 14]

[0_wx_fmt_jpeg]: /images/20220125/2d2e3689bae74330bd48bf792a7fa262.png
[0_wx_fmt_jpeg 1]: /images/20220125/30f94b5f610d4e7ea73aa00bca7f9e25.png
[0_wx_fmt_jpeg 2]: /images/20220125/d161db2dedca4a71961ce6cb3b35c79b.png
[0_wx_fmt_jpeg 3]: /images/20220125/7f5c0e082c1149348ad06f729e74e110.png
[0_wx_fmt_jpeg 4]: /images/20220125/2ac888921a914f33b07d339ccc2db1cd.png
[0_wx_fmt_jpeg 5]: /images/20220125/347d8580f1a6482688dbdcb9da72cd18.png
[0_wx_fmt_jpeg 6]: /images/20220125/341024722fb74aa5b8a4dfb359a8a28b.png
[0_wx_fmt_jpeg 7]: /images/20220125/ea35371a05134db4a36c31978d9a0427.png
[0_wx_fmt_jpeg 8]: /images/20220125/d4006c8436e641288daadca97ef6eedf.png
[0_wx_fmt_jpeg 9]: /images/20220125/bb51fcefc78646bf839fe88bc1615d32.png
[0_wx_fmt_jpeg 10]: /images/20220125/afbcb90182fe48f6b268f69e78c9f4fb.png
[0_wx_fmt_jpeg 11]: /images/20220125/6f86d88c05b24f71a4dcea4aa9d82365.png
[0_wx_fmt_jpeg 12]: /images/20220125/f232ebe191154c58b35f0bdad834df38.png
[0_wx_fmt_jpeg 13]: /images/20220125/77a8048985e64d4a8a23135087d544d0.png
[0_wx_fmt_jpeg 14]: /images/20220125/22d9dbb277ee4aecb600e5ae40357512.png