我们的第一个React Native应用程序

在过去的2/3个月中，我们一直在使用React Native来构建一个本机iOS应用程序，以向客户端展示复杂的交互式用户流。 作为React.js领域的新手，您可能想知道为什么我们会选择做这样一个疯狂的事情，所以这就是故事了。 主要写给同事以了解技术决策和学习。

React Native帮助我们在更短的时间内交付了最小可行的产品，并以更高的质量提供了更多功能。 作为该项目的首席开发人员，利用ES6之类的本地开发经验有限，这是很有意义的。 尽管这是一个实验，但我以后肯定会在React Natives的一角。

选择React Native

现在，市场上肯定有很多选择可以帮助您构建移动应用程序，例如NativeScript，Ionic，当然还有Swift。

让我们从Swift开始，本机实现很棒，并且拥有其他选项没有的功能，但是我们没有内部专业知识，需要整个开发团队都可以访问的解决方案。 其次，NativeScript，Ionic和PhoneGap都是出色的竞争者，但整个空间都显得肿。 例如，您可能将NativeScript与Angular结合使用，从而增加了依赖性和复杂性。 在线上有大量文章可以帮助您权衡所有选择。

现在我们进入React Native。 正如创建者所描述的那样，它是“用于构建用户界面的Java脚本框架”，因此，这听起来像是一个极好的竞争者。 它也是较稳定的选项之一，可能会保留一段时间，值得我们花时间学习。

顾名思义，React是基于反应性数据流构建的，它仅具有单向数据绑定，从而大大简化了发送逻辑。 我们的规范是一个iOS应用程序，但未来可能会出现Android，因此我们也在这里介绍，因为React Native符合这两个规范。 您还可以使用其兄长React.js来构建Web应用程序。

由于易于开发，应用程序质量，性能以及支持React的生态系统，我不仅获得了极大的乐趣，而且感到React Native是该项目的正确选择。 出售React Native的两篇文章：IOS开发人员正在切换，Smashing Magazine考虑使用React Native。 如果您只是刚开始，Cam Jackson撰写了一篇非常不错的初学者文章。

挑选样板

现在有许多样板，具有许多不同的配置选项。 意大利辣味香肠和Ignite只是两个例子。 这两个项目都非常出色，但对于这种简单的设计规范而言，有点“胖”了。 我选择了一个样板，它提供了很好的技术基础，但没有太多与该项目无关的功能。

马特·麦克纳姆（Matt Mcnamee）做了出色的工作，创建了一个简单快速的样板来启动和运行应用程序，经过大量审查，我选择了此作为起点。 具有一些出色的功能，例如：Redux，React Router，Native Elements和内置的样式指南，您怎么会出错。 在这里查看。

现在所有这些项目都以Redux为标准，作为React的新手，我选择使用Redux的设置，但我自己没有参与。 原因：“除非您对香草React遇到问题，否则不要使用Redux” @dan_abramov — Redux的合著者。

应用架构

由于此应用程序主要显示了套管用户流程和交互，因此我们实现了智能组件和愚蠢组件。 我们使用React Router进行页面导航，因为样板已经很好地进行了设置，并且有许多在线文档可以帮助您进行配置。 智能组件的UI逻辑存储在状态中，容器组件将它们包装在一起。 这里有一些关于在React State和Redux Store之间进行选择的讨论。 回顾一下应用程序以及我们创建的内容，我现在可以证明Redux可能会允许我们将来更好地扩展应用程序并保持环境整洁。

疏忽

因此，由于时间紧迫且需要学习的知识很多，因此在应用程序中当然存在一些疏忽，按优先顺序排列：

• 单元测试。
• CSS体系结构。
• 使用Redux作为模型来保持一个应用程序状态。
• 一些渲染功能对于我来说有点大。

使用的额外模块

• react-native-snap-carousel，用于超级简单的图像滑块。
• 单选按钮的react-native-simple-radio-button（想要重建它）。
• react-native-swipe-gestures使我们能够快速建立一些非常好的交互。
• react-native-response仅是一种解决方案，可使该应用程序对不同的设备进行响应。

一些注意事项

在构建智能和愚蠢的组件时，尝试更新父级父状态很容易迷路。 丹·阿布拉莫夫（Dan Abramov）的回答-“当您发现某些组件不使用它们收到的道具，而只是转发它们，而当孩子们需要更多数据时，您必须重新连接所有这些中间组件，现在是引入一些道具的好时机容器组件。”

我最终花了很多时间试图找到一种简单的方法来动画化状态改变后重新渲染的内容。 为此，使用完整的Animation API太久了。 我找到答案并在这里写了一篇简短的文章。