我见过天堂。它是用 JavaScript 编写的。

为什么 React Native 是未来

我描述软件的方式很奇怪。你要么明白我的意思，要么不明白。这有点奇怪，但软件界面给人的感觉就像有重量一样。当我使用一个界面时，它有时感觉很重，有时感觉很轻。没有孰轻孰重之分，只是看情况而定。Chrome 很轻。Safari 感觉更重。而 Firefox 感觉最重。这或许是胡扯，但这就是我的感觉。

在我的软件开发生涯中，最沉重的感受之一就是在 Xcode 中使用 Swift。哦，多么痛苦。多么漫长的等待。那个 Kanye-West 编译器永远让你写不完。过去几年，我一直生活在这个笨重的世界里，用我唯一熟悉的方式构建应用程序：原始的、手动的、单平台的代码。去原生化吧！对吧？

刚接触 React Native 的时候，我有点怀疑。用 JavaScript 写一次代码，就能在 iOS 和 Android 上部署原生应用？——这肯定很糟糕。所以我没管它。最后我写了两个独立的原生应用，一个用 Swift 写 iOS 应用，另一个用 Java/Kotlin 写 Android 应用。这还是在之前用 JavaScript 写的一个 Web 应用和一个基于 Electron 的桌面应用的基础上。（这个应用是一个加密的跨平台笔记应用，所以跨平台可用性至关重要。）

这种方法在一段时间内运行良好，但也遇到了一些困难。我可以编写 Web 应用和 iOS 应用，但我对 Android 系统毫无经验。事实上，我这辈子从未使用过 Android 设备超过一个小时。幸运的是，一位社区贡献者很乐意帮助我构建基础功能，让我无需从头开始编写应用，只需通过逐步改进来维护即可。

每当需要进行更改或添加功能时，我都需要辗转于三个不同的代码库，用三种不同的语言编写相同的代码。作为一个人，这种做法效率不高。即使是最简单的跨平台更改也可能需要一周时间。结果就是，应用程序永远都无法提供任何好的东西。例如，一些用户要求在应用程序中添加密码和指纹锁——对于一个注重安全的笔记应用程序来说，这是一个非常合理的要求。但实现这些功能绝非易事：首先，除了输入界面外，还需要一个密码设置界面。然后，使用密码加密离线用户数据。最后，在移动设备上，需要指定何时请求密码或指纹（立即请求还是退出应用程序时）。想到要用 Swift、Java 和 JavaScript 编写所有这些代码，简直是一场噩梦。我实在无法接受。

一定有更好的方法。

进入 React Native

我必须描述一下为应用程序维护单独代码库的感受和背后的情感，这样你才能了解我开始使用 React Native 时的兴奋之情。在使用 Atom (!) 编写原生应用程序的第一周，我惊讶得目瞪口呆。我简直不敢相信它是如此简单。没有 Xcode，没有 Swift，更改可以立即重新加载，使用一直很容易使用的 JavaScript 编写——我感觉自己身处天堂。当我编写代码时，我会将 iOS 模拟器和 Android 仿真器并排放置，并且有一半的时间都不敢相信一切都运行正常。我从来不需要想，嗯，这在 iOS 上看起来不错，我想知道它在 Android 上运行是否良好？大多数情况下，如果它在一个平台上运行良好，那么只需稍加调整，它就可以在两个平台上运行良好。

最棒的部分？我重用了 Web 应用中的所有类！我几乎不用改动就能批量复制包含模型、控制器和加密逻辑的复杂类。应用的整个同步引擎？直接从 Web 应用复制。加密和解密？从 Web 应用复制。模型和关系？也从 Web 应用复制。

我太高兴了，不用从头开始写这些东西了。同步很难，加密同步也不容易。Web/桌面代码库是我们经过测试的旗舰产品，能够复用这些组件让我信心倍增。

使用原生 IDE 构建原生应用最难的部分之一就是用户界面。在 iOS 上，开发界面非常耗时费力。虽然可以通过代码完成，但代码量很大。而且，用代码管理动态布局约束比大多数任务都更棘手。你可以使用界面构建器，但这样会失去代码赋予你的细粒度控制和灵活性。祝你在 Git 中提交和协作界面构建器变更时一切顺利。

在 React Native 中，动态界面变得轻而易举。你可以使用类似 CSS 的语法来构建你梦想的设计：

let containerStyles = {
    backgroundColor: “red”,
    display: “flex”,
    alignItems: “center”,
    width: “100%"
}

let childStyles = {
    fontSize: 14,
    color: “black”,
    fontWeight: “bold"
}

<View style={containerStyles}>
     <Text style={childStyles}>Hello, future.</Text>
</View>

这是在 React Native 中构建所有接口的基础。它真的像看起来一样简单。最关键的部分是什么？

主题。

本质上，你的整个界面就是一堆 JSON 属性。你可能已经注意到，从服务器或文件中提取 JSON 样式的 blob 并彻底改变应用的外观并不难。所以我就是这么做的：

你知道这在原生代码中有多难吗？光是想想就觉得头疼。

有什么问题？

在我穿越天堂的旅途中，我满怀惊奇和疑惑地环顾四周，不禁思考，这其中究竟有什么陷阱？构建原生应用不可能这么简单。这感觉简直像是一种罪孽。

毕竟，这毕竟是软件，而且还是软件开发工具，所以没有完美的东西。React Native 仍在积极开发中，所以你可能会遇到一些问题。我最初遇到的几个问题感觉就像生死攸关。“糟糕！这下完了！”我就知道。我知道这简直好得难以置信。这个问题会彻底毁掉我的项目。幸运的是，没有无法解决的问题。

例如，我遇到的一个比较烦人的问题是，React Native 的 TextInput 组件在 Android 上对于笔记应用来说运行得不够好。滚动很卡，而且每次滚动阅读笔记时都会自动弹出键盘。这真是太让人抓狂了。我花了几天时间尝试解决这个问题，通过某种方式修改 JavaScript 代码来避免这两个问题。但完全没用。然而，我意识到这并不是项目的结束，而是一个新的开始。

React Native 让你可以轻松构建任何你心仪的原生组件。原生组件或模块意味着你可以使用原生 Swift/Objective-C 或 Java/Kotlin 编写界面和业务逻辑，并轻松创建 JavaScript 接口来控制这些模块。就我而言，我用 Java 编写了一个自定义的 TextView 模块，使滚动更加流畅，并且不会在滚动时影响输入。这完全是用 Java 语言在 Android Studio 中编写的。我用 JavaScript 导入它，将其添加到视图层级结构中，然后，React Native 中一个滚动效果优美的文本输入框就出现了。问题解决了。

我也将原生模块用于其他用途，包括加密模块（iOS 和 Android 的单独模块）和指纹认证模块。

你应该使用 React Native 吗？

是的，是的，100% 是。即使你开发的是单平台应用，我也会使用 React Native。感觉它是编写应用的更好方式。Swift 虽然很新，但与 JavaScript 编写应用的灵活性相比，它显得过时且笨重。我真心希望苹果专注于让编写优秀应用变得更容易，而不是引入这种我最近遇到的最深奥的编程语言。Xcode 是基于 Objective-C 构建的，Swift 仍然感觉与它格格不入。

在构建原生移动应用时，我能够复用 Web 应用大约 70% 到 80% 的代码。其余的是无法复用的界面代码。我甚至能够针对较低版本的 iOS 和 Android 系统进行开发。我们最初的 Swift 标准笔记应用使用了 Core Data 的最新实现，因此需要 iOS 10 系统。新的 React Native 实现在 iOS 8 和 Android 5 上开箱即用。

想体验 React Native 应用的体验吗？您可以下载成品Standard Notes：一款加密笔记应用，适用于iOS和Android 系统。您还可以查看完整源代码。如果您对 React Native 开发流程有任何疑问，请随时通过 Twitter 联系我们。