React Native at Wix — The Architecture II (Deep dive)

Multi-Module Architecture

在上篇博文中，我写了关于Wix应用程序的总体架构。我解释了我们如何调整它以适应Wix组织结构（通过使用多模块架构，提高速度以及将Native透明固化），以及如何帮助我们实现独立开发并增强每个小组的部署体验。

有了这些信息，我们现在可以深入研究代码本身，并看到这种体系结构的实际实现。我们之前已经概述了一些术语（Module和Engine），用于描述架构中的各个部分。这篇文章旨在说明其中的一些，并指出相关的代码示例。

为了更好地解释这种复杂的设计，我选择从下至上对其进行描述。首先，我们将跳入Engine实施，然后构建一个模块示例，然后再查看应用程序的主库。

为了这个示例，我选择Dror Biran推荐的基于react-native-crash-course构建一个简单的博客应用程序。该示例应用程序将显示帖子列表，并具有查看，添加和删除帖子的功能。

The Engine

我的Engine实现示例是基于react-native-wix-engine，您可以在此处找到完整的源代码：

https://github.com/wix-incubator/react-native-wix-engine

请务必注意，这与Wix应用程序中使用的引擎不同，并且可能不是您要使用的引擎，它只是一个示例，可以帮助您更好地了解如何创建自己的引擎。

首先，让我们使用 react-native init创建一个新的react-native项目。

Adding Native Libraries

如前所述，您的应用程序Engine应包括所有本机实现和对第三方Native库的依赖关系。每个应用程序应该会有所不同。

在这一点上，您需要选择将成为应用程序基础的库。在使用React Native开发移动应用程序时，最重要的步骤之一就是为您的项目选择合适的导航库。导航是应用程序的骨干，对用户体验有很大的影响。在我的示例中，我选择了Wix的react-native-navigation来获得完全原生的导航体验。我决定使用的另一个重要库是react-native-ui-lib—作为UI工具集和组件库。

您可以将所需的任何库（JS库和Native库）添加到Engine中，它们将可供应用程序中的所有模块使用。如果安装Native库，请记住将其链接到Native项目

Pre-Built Binaries

Engine令人兴奋的部分是预生成的二进制文件，这些二进制文件与引擎的JS代码库一起发布到NPM，然后由Module使用。

首先，让我们看看需要构建和发布哪些文件：

Android:

• .APK file with debug symbols

• .APK file for release

iOS:

• .APP file with debug symbols — built for Simulator (x86)

• .APP file with debug symbols — built for a real iOS device (ARM*)*

• .APP file for release — built for a real iOS device (ARM*)*

为了允许开发人员在发布和调试模式下使用模拟器\设备调试应用程序，并发布到App Store和Google Play，我们基本上需要构建项目5次。这意味着对于每个新的Engine版本，我们都应构建所有这些变体并将其发布为NPM包（在这里，我选择将二进制文件保存在同一Engine NPM包中，但是将它们保存在单独的包中会更有效， 并仅在需要时下载）。

要构建我们的Engine：

npm run build

您可以查看发布的完整实现 脚本。

请记住，预构建的二进制文件仅包含Native部分，我们还需要注入JS bundle文件。我们在下一部分介绍。

Engine Command Line Interface (CLI)

针对我们的体系结构我们设定的目标之一是开发人员的环境必须与Native无关。

Engine CLI是 命令行界面。我们的CLI的主要目的是代替React Native CLI（考虑到它的一部分不再相关），并通过面向开发人员的友好界面绕过Engine结构的复杂性。

Engine CLI用法的一个示例是在设备\模拟器上安装预构建的App。这是首选的选项，与使用Xcode，Android Studio或调用react-native CLI命令react