一臉懵逼：吐槽前言

后面慢慢吐槽

感謝前人分享經驗系列 ：React-Native 資料

React-Native中文網

iOS 和 Android 開發的 React Native 入門指南

iOSer邁向前端一小步--OC/Swift與RN混編Demo (這里面有OC\RN混編的項目搭建Demo)

（后面如有用到有用的繼續補充）

環境配置與項目搭建

環境配置與純RN搭建看這個就行了

iOS中 RN與OC項目混編 （兩個關鍵文件配置）

• package.json
• Podfile

package.json

{
  "name": "RNProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2"
  }
}

name    項目名稱
version     版本（遵守‘大版本.次要版本.小版本’的格式）

package.json詳解

// 終端中
?  app-iv3 git:(dev_2.7.2_Dombo_RN) ? ls
INTERNATIONAL_README laoyuegou            package-lock.json
README               node_modules         package.json

?  app-iv3 git:(dev_2.7.2_Dombo_RN) ? npm install

cd 到 package.json 所在的文件目錄下
npm install 

安裝完成后會有一個 node_modules 文件夾

Podfile

#  ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ======
        pod 'React', :path => ‘../node_modules/react-native', :subspecs => [
        'Core',
        'RCTImage',
        'RCTNetwork',
        'RCTText',
        'RCTWebSocket',
        ]
# 根據需求添加項目中需要的模塊
# path 這里要正確設置 node_modules/react-native 的所在路徑，每個人不一樣

配置完后，pod install 即可安裝 React-Native 所以來的相關組件庫

React-Native 咋用呢

// 倒入頭文件
#import <React/RCTRootView.h>

// 
NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
                             
// 傳給RN的參數必須是字典類型，要和js代碼propertis一致
NSDictionary *params = @{@"scores" : @[
                                     @{@"name" : @"Alex",
                                         @"value": @"42"},
                                     @{@"name" : @"Joel",
                                         @"value": @"10"}
                                     ]
                             };
    // moduleName 要對應index.ios.js 上的 AppRegistry module
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                                                 moduleName        : @"RNTestViewModule"
                                                 initialProperties : params
                                                  launchOptions    : nil];
                                                
// 去掉返回箭頭的title
UIBarButtonItem *item = [[UIBarButtonItem alloc] init];
item.title = @"";
self.navigationItem.backBarButtonItem = item;
       
UIViewController *viewController = [UIViewController new];
viewController.view = rootView;
viewController.title = @"承載RN視圖的VC";
[self.navigationController pushViewController:viewController animated:YES];

React-Native 0.45.0 以上版本需要下載boost等幾個第三方庫編譯（是需要終端fan qiang的，否則超時失敗）

• package.json
• Podfile

package.json

{
  "name": "RNProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0"
  }
}

Podfile.json

# Uncomment the next line to define a global platform for your project
react_native_path = './Extern/ReactNative/node_modules/react-native'

platform :ios, '9.0'
inhibit_all_warnings!

target 'RNProject' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

    # 'node_modules'目錄一般位于根目錄中
    # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
    pod 'React', :path => react_native_path, :subspecs => [
    'Core',
    #'BatchedBridge', # 0.45 版本以后需要添加
    'CxxBridge',
    'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發者菜單
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    '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'
    pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end

剩下步驟跟part1 中的一樣不再描述

運行

終端cd 到 package.json 文件下

如果是adb斷了就使用一下步驟

1. adb reverse tcp:8081 tcp:8081
2. npm start
   如果adb沒斷,直接
3. npm start

RN報錯與解決方案：
1、Argument list too long: recursive header expansion failed at
解決：查到的一些方法太好使，'node_modules'目錄一般放于根目錄中，不要放太深層的路徑即可

2018-7-24更新，后續再補

IDE：Visual Studio Code

Visual studio Code 寫RN所需要的插件