环境准备

• XCode
• CocoaPods
• React Native

开始使用

cocoapods添加react native依赖

创建react native项目

执行npm install

为IOS项目添加pod支持

这里就不多说怎么安装了，网上资料也很多

1. 编辑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

2. 执行pod install，如果报GLog或glog不存在，互相切换就可以了。
3. 在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运行项目