• 終端創建個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