我在React-Native和iOS之间集成的经验

好吧,这是我第一次使用React Native,但不仅是第一次与本地iOS应用程序集成。

项目配置

通常,我从Facebook官方文档开始:

与现有应用程序集成·React Native
从头开始新的移动应用程序时,React Native很棒。 但是,它对于添加… facebook.github.io 也很好。

必备的先决条件是已安装npm ,即JavaScript的软件包管理器。 一切都非常简单:

https://nodejs.org/en/download/

最后我执行:

  $ npm -v 

我看到我已经安装了版本5.6.0

除此之外,建议安装: CocoaPods ,用于Objective-C,Swift和在Objective-C运行时上运行的任何其他语言的依赖项管理器。 为了便于安装,我使用Homebrew (macOS缺少的软件包管理器)进行安装:

  $ brew安装cocoapods 

好的,您可以开始设置项目了。
在iOS项目中,我创建了一个“ js ”文件夹,其中包含React-Native项目。 首先,在此文件夹中,创建具有以下结构的文件“ package.json ”。 请注意,我的应用程序称为“ StoryReact”

该应用无法生成,“ Yoga-internal.h”文件似乎存在错误。 经过一些在线研究之后,我决定在GitHub上创建一个问题,但是我得到了负面的反馈,我将不得不手动更改框架的代码。 但是我不喜欢它作为解决方案,因此我尝试切换到另一个版本

然后我删除:

  • “豆荚”
  • “ Podfile.lock”
  • “ js / node_modules”

在阅读到从0.54到最新版本的版本都给出了相同的问题之后,我回到终端并安装了React-Native的版本0.51.0

因此,我将执行与之前相同的命令,以使用pod在项目上安装react-native和依赖项,相反,包括对Podfile的更改:

  $ yarn add react-native@0.51.0 
$ yarn add react @ react @ 16.0.0
$ pod安装
 从: 
  pod'glog',:podspec =>'./js/node_modules/react-native/third-party-podspecs/GLog.podspec' 
 至: 
  pod'GLog',:podspec =>'./js/node_modules/react-native/third-party-podspecs/GLog.podspec' 

让我们尝试再次构建。 xcworkspace文件..

出现另一个错误,它无法导入“ fishhook.h ”文件。

但是这次解决方案比预期的要容易。 只需按照GitHub问题中的描述更改代码中的行,一切都将最终成功!

 来自: 
  #import  
 至: 
 #import "fishhook.h" 

但是,根据我的经验,它很复杂,使我浪费了很多时间进行配置,我希望将来Facebook团队会提供更详细的文档。

尽管有些陈旧,但是非常有效我还是推荐Ray Wenderlich的指南,该指南还为刚开始的人提供了一个试用项目。

https://www.raywenderlich.com/136047/react-native-existing-app

集成react文件并运行!

首先,您必须使项目能够接收HTTP调用,因此编辑info.plist文件并添加以下代码( 以“源代码”打开将使您的生活更轻松 ):

好的,我们的信用额度到了..现在转到终端,在js文件夹中并执行:

  npm开始 

构建您的应用程序,瞧

如果不起作用,请检查端口8081上是否有任何进程:

  lsof -i:8081 
kill -9 // 替换为进程的PID

提示:

  • 如果要立即在模拟器上查看js文件的更改,则必须激活热重载
 在模拟器上按:CMD + D 
“启用热重装”

部署您的应用

如果要在TestFlight或AppStore上发布应用程序,则需要创建jsbundle文件包

  • 打开XCode项目/构建阶段/ [+]新的运行脚本阶段