照着官方文档撸，撸出了一连串的坑[泪奔中ing],但是不要紧，最终还是弄出了一个结构。
先上效果图：
第一个Tab是导入的RN页面，后两个是原生。
友情提示：如果你弄过集成到原生项目或者对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集成到现有的原生应用是一个非常有价值的做法。
主要由以下几个步骤：
1、创建一个原生项目。
2、创建react-native相关目录和文件。
3、创建Podfile，用cocoaPods管理react-native依赖。（这一步巨坑，坑到不能呼吸）。
4、添加Swift项目加载react-native页面的方法。
5、运行并调试。
创建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",
"postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import <React\\/RCTValueAnimatedNode.h>/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h; sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m"
},
"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项目中，在这个位置：
是没有podstinall这一行，这一行主要是为了解决(截图来自网络)：
这个问题，而修改的。
当然，我们也可以按照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库（即<Text>组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。
理解这段话非常重要，涉及到我们在react-native中添加一些包含原生模块的功能的第三方的时候，会去更新podfile。
首先，在iOS的根目录下使用cocoaPods的名利
$ pod init
然后会生成一个PodFile的文件。
首先我们按照官方的文档，把Podfile文件修改为如下内容：
source 'https://github.com/CocoaPods/Specs.git'
# 对于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了。但是，我发现自己还是图样图森破。
安装之后，报各种错：
类型一：
类型二：
遇到过上面的错误的同学，可以扣波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了。
接下来呢？我们就可以开始我们的项目布局了。
在下一篇文章中，我们来研究一下如何写一个Swift模块去和react-native通信，以及如何接入包含原生模块的第三方。
如果本文对你有帮助，请不吝打赏，请我喝杯咖啡也是可以的~~~
转载请注明出处！！
