iOS项目集成React Native(CocoaPods)

• 终端创建个rn项目

react-native init NewRN

• 把rn项目中的 pacgage.json文件和index.ios.js文件拷贝到iOS项目的根目录

  • 根目录:node_modules所在同级目录
  • /是相对位置

• 在原有iOS项目中根目录

npm install

• 创建Podfile

touch Podfile

• 编辑Podfile

platform :ios, '8.0'
target 'NewRN' do

react_native_path = "./node_modules/react-native”
pod "React", :path => react_native_path, :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket'
]
end

• 初始化Podfile

pod install 

注意: 如果终端出现找不到yoga路径,那么需要在podfile文件中添加路径

 pod 'Yoga', :path => './node_modules/react-native/ReactCommon/yoga'

• 编辑index.ios.js 内容

• 修改原生项目里的内容

#import "RNViewController.h"
#import <React/RCTRootView.h>
@interface RNViewController ()

@end

@implementation RNViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"RN页面";
    
    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"newRN"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    rootView.frame = [[UIScreen mainScreen]bounds];
    [self.view addSubview:rootView];
    
}

@end

• 修改info.plist文件

App Transport Security Settings -> Allow Arbitrary Loads->YES