http://reactnative.cn/docs/integration-with-existing-apps/

1.安裝好ReactNative開發環境

2.安裝好CocoaPods

3.建立專案根資料夾：A

4.建立資料夾A/ios

5.建立新專案到A/ios目錄下

6.根目錄A下建立package.json和index.js（老版本index.ios.js）檔案

7.根目錄A下執行$ yarn add react-native整合

8.控制檯列印可能會出現警告類似warning "[email protected]" has unmet peer dependency "[email protected]

此時安裝指定版本React $ yarn add [email protected]

8.新增CocoaPods到iOS專案中

$ pod init

9.配置Podfile檔案

# target的名字一般與你的專案名字相同
target 'NumberTileGame' do

  # 'node_modules'目錄一般位於根目錄中
  # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
  pod 'React', :path => '../../node_modules/react-native', :subspecs => [
    
 
'Core',
    'CxxBridge', # 如果RN版本 >= 0.47則加入此行
    'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發者選單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 除錯功能需要此模組
    'RCTAnimation', # FlatList和原生動畫功能需要此模組
    # 在這裡繼續新增你所需要的其他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

10.$ pod install

11.使用本地Web服務除錯

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

在專案根目錄A下啟動

$npm start

引用框架

#import <React/RCTRootView.h>

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                  moduleName: @"RNHighScores"
                           initialProperties:
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                               launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

12.打包js和資原始檔

http://www.cocoachina.com/ios/20170511/19250.html

在根目錄下建立release_ios資料夾後

執行

react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

13.將生成的main.jsbundle匯入到專案中

14.js路徑替換為

NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];//[NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

 15.未知大部分使用者Target下添加了shell命令

export NODE_BINARY=node
../../node_modules/react-native/scripts/react-native-xcode.sh