Kotlin 能用来开发 React Native 吗？

0. 引子

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

摄于：清境农场

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

1. 死于黎明前的黑暗

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 能给我来一个 Component 么？

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

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

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

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

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

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

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

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

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

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