环境准备
- XCode
- CocoaPods
- React Native
开始使用
cocoapods添加react native依赖
创建react native项目
执行npm install
为IOS项目添加pod支持
这里就不多说怎么安装了，网上资料也很多
- 编辑Podfile,添加相关的依赖
react_native_path = '../node_modules/react-native' #react-native包所在的目录
platform :ios, '9.0'
target "demo" do
use_frameworks!
pod 'React', :path => react_native_path, :subspecs => [
'Core',
#'BatchedBridge',
'CxxBridge', # 0.45 版本以后使用这个
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTAnimation',
'RCTActionSheet',
'RCTBlob',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket'
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
# Third party deps
pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
#pod 'GLog', :podspec => react_native_path + '/third-party-podspecs/GLog.podspec'
#大概从0.52之前的版本使用GLog，之后的使用glog，记得不大清楚。可以查看/node_modules/react-native/third-party-podspecs 文件夹下的文件，或者报错之后再做修改
pod 'glog', :podspec => react_native_path + '/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end
- 执行pod install，如果报GLog或glog不存在，互相切换就可以了。
- 在XCode中运行项目
错误处理
出现错误
node_modules/react-native/ReactCommon/yoga/yoga/Yoga-internal.h:11:10: 'algorithm' file not found
node_modules/react-native/React/Base/RCTConvert.h:19:9: Could not build module 'yoga'
#import <RCTAnimation/RCTValueAnimatedNode.h>
#import <fishhook/fishhook.h> 无法导入等
错误
编辑Podfile 在底部添加如下内容
def change_lines_in_file(file_path, &change)
print "Fixing #{file_path}...\n"
contents = []
file = File.open(file_path, 'r')
file.each_line do | line |
contents << line
end
file.close
File.open(file_path, 'w') do |f|
f.puts(change.call(contents))
end
end
post_install do |installer|
# https://github.com/facebook/yoga/issues/711#issuecomment-381098373
change_lines_in_file('./Pods/Target Support Files/yoga/yoga-umbrella.h') do |lines|
lines.reject do | line |
[
'#import "Utils.h"',
'#import "YGLayout.h"',
'#import "YGNode.h"',
'#import "YGNodePrint.h"',
'#import "YGStyle.h"',
'#import "Yoga-internal.h"',
].include?(line.strip)
end
end
# https://github.com/facebook/yoga/issues/711#issuecomment-374605785
# 低版本如果运行出错，删除这一小段 33-40行
change_lines_in_file('../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h') do |lines|
unless lines[27].include?("#ifdef __cplusplus")
lines.insert(27, "#ifdef __cplusplus")
lines.insert(34, "#endif")
end
lines
end
# https://github.com/facebook/react-native/issues/13198
change_lines_in_file('../node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h') do |lines|
lines.map { |line| line.include?("#import <RCTAnimation/RCTValueAnimatedNode.h>") ? '#import "RCTValueAnimatedNode.h"' : line }
end
# https://github.com/facebook/react-native/issues/16039
change_lines_in_file('../node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m') do |lines|
lines.map { |line| line.include?("#import <fishhook/fishhook.h>") ? '#import "fishhook.h"' : line }
end
end
运行pod install，如果有错误，按照错误提示解决就可以。
完成
Xcode运行项目
