转载

含泪导入React-native到Swift原生项目

照着官方文档撸，撸出了一连串的坑[泪奔中ing],但是不要紧，最终还是弄出了一个结构。

先上效果图：

第一个Tab是导入的RN页面，后两个是原生。

合成效果图.gif

友情提示：如果你弄过集成到原生项目或者对RN 开发和原生开发比较熟悉，那么，请直接往下看。如果你是第一次弄，并且对RN不是很熟悉，那请你移步到官方的教程，链接如下：
Facebook官方：https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
React-native中文网：https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content

将react-native集成到现有的原生应用是一个非常有价值的做法。

主要由以下几个步骤：

创建一个原生项目。
创建react-native相关目录和文件。
创建Podfile，用cocoaPods管理react-native依赖。（这一步巨坑，坑到不能呼吸）。
添加Swift项目加载react-native页面的方法。
运行并调试。

创建Swift项目

在这一步，就是正常的创建我们的swift项目。然后根据我们的需求，搭建正常的项目框架。

这里只需要理解一个概念：

(敲黑板划重点了！！！！)

RN在原生端显示的东西，是绘制在一个继承自UIView的View视图上的，其类别为RCTRootView

基于这个概念，我们可以在原生项目中去组织我们的页面关系，路由逻辑了。

创建react-native相关目录和文件

在这一步，我们的主要目的是搭建React-native相关的开发环境。

切记：不哟啊用react-native命令去直接生成项目，会很蛋疼。

1）新建package.json文件

{
  "name": "就不告诉你们了，复制党不哟啊手抖哦",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",

含泪导入React-native到Swift原生项目

(因为有的字符打不出来，这行代码只能用截图了)

  },
  "dependencies": {
    "mobx": "^4.1.1",
    "mobx-react": "^5.0.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-native": "0.54.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "^16.3.0-alpha.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

这里注意一个问题，正常的RN项目中，在这个位置：

含泪导入React-native到Swift原生项目

是没有podstinall这一行，这一行主要是为了解决(截图来自网络)：

含泪导入React-native到Swift原生项目

RCTWebSocket报错的问题.jpg

这个问题，而修改的。

当然，我们也可以按照facebooke的issue链接去解决问题，但是，在RCTAnimation中会遇到其他的问题。

所以呢，我暂时就采用这个解决方案了。

接着，只需要执行

yarn

命令，生成node_modules文件夹就可以了。

接下来，就是pod集成React-native的时候了。

配置CocoaPods依赖

React-native是由node模块安装到项目中的。利用静态库拖拽，自行link项目的方式也可以去加入到原生项目。但是在这里有个坑不太好填，就是在手动link的静态库中引入了一些三方开源项目，而我们的工程在之前同样也引入了同样的三方开源项目，会有冲突。

所以在这里采用cocoapods的方式去整合依赖。

引用一段中文网的描述

在你开始把React Native集成到你的应用中之前，首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候，需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec。

可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般来说你首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库（即组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。

理解这段话非常重要，涉及到我们在react-native中添加一些包含原生模块的功能的第三方的时候，会去更新podfile。

首先，在iOS的根目录下使用cocoaPods的名利

$ pod init

然后会生成一个PodFile的文件。

首先我们按照官方的文档，把Podfile文件修改为如下内容：

source ' 

# 对于Swift应用来说下面两句是必须的
platform :ios, '8.0'
use_frameworks!

# target的名字一般与你的项目名字相同
target 'swift-2048' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  
   # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  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'
  
end

紧接着，可以执行pod install。

按照常理而言，这里就OK了。但是，我发现自己还是图样图森破。

安装之后，报各种错：

类型一：

含泪导入React-native到Swift原生项目

类型二：

含泪导入React-native到Swift原生项目

错误图片

含泪导入React-native到Swift原生项目

遇到过上面的错误的同学，可以扣波111111了。
先上个外部资料参考一下：https://stackoverflow.com/questions/48705250/react-native-ios-could-not-build-module-yoga-algorithm-file-not-found
外部资料二：https://github.com/facebook/yoga/issues/711

上面这个链接是个有效的修改办法。

当然，按照官网的处理，在pod install的时候还会有些小错误，这个有开发经验的人都能搞定。

敲黑板：这里划重点了。

怎么处理上面的问题呢？？

只要把这段代码加入到Podfile里面即可：(注意是最底部)

def fix_cplusplus_header_compiler_error
    filepath = '../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h'
    
    contents = []
    
    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close
    
    if contents[32].include? "&"
        contents.insert(26, "#ifdef __cplusplus")
        contents[36] = "#endif"
        
        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def fix_unused_yoga_headers
    filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'
    
    contents = []
    
    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close
    
    if contents[12].include? "Utils.h"
        contents.delete_at(15) # #import "YGNode.h"
        contents.delete_at(15) # #import "YGNodePrint.h"
        contents.delete_at(15) # #import "Yoga-internal.h"
        contents.delete_at(12) # #import "Utils.h"
        
        file = File.open(filepath, 'w') do |f|
            f.puts(contents)
        end
    end
end

def react_native_fix
    fix_cplusplus_header_compiler_error
    fix_unused_yoga_headers
end

post_install do |installer|
    react_native_fix
end

接着找到node_modules/react-native/ReactCommon/yoga/yoga.podspec

这个文件，在文件底部结尾处（end上方）加入以下代码：

spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h'

接着，再进行pod update就可以愉快的build了。

接下来呢？我们就可以开始我们的项目布局了。

本文用的是React-native 0.54，对于React-native 0.55，其实区别在于哪里？

在于0.55上面即将废除一些属性，和一些改动。参见下图

含泪导入React-native到Swift原生项目

作者：莫寂岚
链接：https://www.jianshu.com/p/611b49ccf351

正文到此结束

所属分类：移动开发

本文标签： UI 代码开发 http id db 配置 GitHub dependencies ECS IO node 安装 API 快的 core 图片 tab tar 管理组织 src ORM 编译 Facebook json build root js 开源项目 HTML Swift IOS web https 调试 App CocoaPods 1111 update git 开发者需求开源 ACE Pods 目录 ip
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

含泪导入React-native到Swift原生项目

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流