如何将现有的本机应用程序集成到React-Native SDK

为什么写这篇文章？

本文为您的iOS应用程序与React-Native SDK集成提供了非常基础且足够详尽的步骤。 如果按照上述所有步骤进行操作，那么到本文结尾，您将准备好完全集成的React-Native-iOS应用程序。

假定观众

假定您是一名程序员，并且具有为iOS，Android和Web平台中的任何一种构建应用程序的经验。 我希望您将macOS升级到Mojave（版本10.14.1），以使将来的开发更加顺畅。 它着重于使本地应用程序在react-native SDK中运行所需的基本更改。

快速了解React-Native项目的背景

首先让我快速介绍一下为什么我们非常需要这种集成。 我们在nearbuy.com上试图找出哪种UI / UX设计和功能最适合通过Web，M-Web（PWA），iOS和Android等各种平台访问我们产品的客户。 因此，我们开始在Web应用程序和PWA的各个页面上进行实验，这是因为通过部署时间的灵活性和快速向所有可能的最终用户进行更新的实验变得容易。

我们认为通过PWA进行的流量可以充分代表完整的移动流量的行为，即m-web，iOS和android的结合，但事实证明这还不够好，而通过本机应用进行的实验会浪费大量时间和资源因为本地更新涉及许多耗时的步骤，所以它是组织的一部分。 然后我们想到了将现有的本机应用程序集成到React-Native SDK中的想法。 此设置可帮助我们在需要时通过任何数量的动态应用程序更新/实验来吸引最终用户。

---

缩略语使用

RN：React Native
PWA：渐进式Web应用程序
移动网络：移动网络
cli：命令行界面
RN包装器/ RN SDK：RN的“ Hello World”应用

---

第1步：设置React-Native SDK包装器

这是此设置最简单的部分。 对于初学者，您必须

• 按照此处的说明安装节点。
• 通过运行终端命令sudo npm install -g react-native-cli安装RN sudo npm install -g react-native-cli 。
• 您可以安装一个名为Watchman的软件包来监视文件系统中的更改，尽管这不是首要任务。

现在要创建RN包装器，请首先转到要保留RN项目代码的文件夹，然后在terminal中运行react-native init 命令。 此安装将花费一些时间，因为它涉及到安装诸如react＆react-native之类的库以及所有必需的依赖项。 RN包装器已准备就绪，可以进行进一步的集成，其结构应与下图中的结构完全相同，除了项目的名称。

步骤2：安装cocoapods并进行设置

这可以帮助您安装Xcode。 要在Xcode中运行iOS项目，您需要cocoapods。

您需要在系统中安装cocoapods和设置环境才能构建/运行iOS应用。 下面列出了此过程：

1. 打开终端。
2. 通过运行命令sudo gem install cocoapods 。
3. 为了有效使用Pod，您需要通过运行命令pod setup 。

第3步：用本机项目的内容替换React-Native SDK包装器的iOS文件夹内容

1. 转到本机代码库，复制根目录中的所有内容，然后将其粘贴到RN包装程序的iOS文件夹（存在于根文件夹中）中。
2. 我们不会再接触本机应用程序代码库。
3. 现在，在RN包装器中打开更新的iOS文件夹，删除Pods文件夹和Podfile.lock文件。

第4步：为React-Native项目安装正确的吊舱

将以下代码行粘贴到target 'TestApp' do下方的RN包装中的Podfile文件中即可。

  ＃您的'node_modules'目录可能位于#project的根目录中，但如果不在，请相应地调整`：path` 
  pod'React'，：path =>'../node_modules/react-native'，：subspecs => [ 
  '核心'， 
  'CxxBridge'，＃在RN> = 0.47时包括 
  'DevSupport'，＃如果RN> = 0.43，请包含此选项以启用应用内开发菜单 
  “ RCTText”， 
  “ RCTNetwork”， 
  'RCTWebSocket'，＃调试需要 
  'RCTAnimation'，＃FlatList和在本机UI线程上运行的动画需要 
  ＃添加要在项目中使用的任何其他子规格 
  ] 
  ＃如果您使用RN> = 0.42.0，则明确包含Yoga 
  pod'yoga'，：path =>'../node_modules/react-native/ReactCommon/yoga' 
  ＃第三方deps podspec链接 
  pod'DoubleConversion'，：podspec =>'../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 
  pod'glog'，：podspec =>'../node_modules/react-native/third-party-podspecs/glog.podspec' 
  pod'Folly'，：podspec =>'../node_modules/react-native/third-party-podspecs/Folly.podspec' 

现在，转到终端并将当前工作目录更改为RN包装器的iOS文件夹，然后运行终端命令pod install 。

步骤5：在macOS中设置命令行工具

1. 要在Xcode之外构建/运行iOS项目，您需要开发人员的命令行工具，并且可以通过运行以下两个终端命令来进行设置。
   sudo xcode-select --switch /Applications/Xcode.app
sudo xcode-select --switch /Library/Developer/CommandLineTools
2. 通过转到Xcode-> Xcode菜单->首选项->位置，为命令行工具设置正确的位置。 在这里，从下拉列表中选择您的Xcode版本并退出Xcode。

第6步：构建React-Native代码并解决初始错误

1. 首先，通过使用Xcode打开iOS文件夹中存在的 .xcworkspace文件并通过快捷键⌘ + B运行构建，检查是否可以成功构建项目 。
2. 检查Xcode中是否有任何错误。 如果构建失败，则简单的Google搜索可以提供帮助。 我不在这里讨论错误的细节，因为它们完全取决于一个人的代码库的细节/配置。
3. 在终端中，将当前目录更改为RN包装器的根目录，然后只运行terminal命令react-native run-ios 。 它在Xcode之外构建完整的项目，在端口8081上打开服务器，并开始提供应用程序内容，并且iOS应用程序在iOS模拟器中打开。
4. 最后，根据需要将特定于git的文件和文件夹添加到RN项目中。
5. 您可以通过在要使用RN代码的控制器文件的任何生命周期函数中添加以下代码行来开始开发。

  NSURL * jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot：@“ index” fallbackResource：nil]; RCTBridge * bridge = [[RCTBridge alloc] initWithBundleURL：jsCodeLocation moduleProvider：nil launchOptions：nil]; RCTRootView * ViewViewB = [T ：bridge moduleName：@“ ” initialProperties：nil]; [self.view addSubview：rootView]; 

本文没有tl; dr。 我无法将其缩小到超过目前的水平，对此我感到抱歉

---

如果有任何疑问或讨论与在React Native中构建应用程序有关，请随时在🙂以下发送邮件或回复