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 全栈的能力只是为我们多了一种选择。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180109A0E34900?refer=cp_1026

扫码关注云+社区