官方鏈接：reactnative.cn/docs/0.47/integration-with-existing-apps.html#content
1、創(chuàng)建一個(gè)根文件夾，里面創(chuàng)建一個(gè)字文件夾，命名ios
2、在根文件夾下創(chuàng)建一個(gè)package.json 文件，終端touch?package.json 就可以
{ "name": "MyReactNativeApp",
"version": "0.0.1", "private": true,
"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" },
"dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.44.3" }
}
3、$ npm install ? ? 安裝JavaScript依賴包。（別告訴我你沒(méi)裝npm）
目前的目錄結(jié)構(gòu)如下圖：
4、官方文檔建議大家使用cocoapods 來(lái)配置環(huán)境，so，你得裝個(gè)cocoapods，（聽(tīng)人勸，吃飽飯?。?/p>
5、在 ios文件下，將我們的iOS工程拖進(jìn)來(lái)。look，這里需要注意是將ios工程里的文件。我在測(cè)試的時(shí)候，將整個(gè)文件往里一丟，后續(xù)的配置中出現(xiàn)了很多問(wèn)題。看了React Native 初始化項(xiàng)目的目錄結(jié)構(gòu)，才發(fā)現(xiàn)不是這么回事。不多說(shuō)了，看圖！ 這樣的結(jié)構(gòu)才能讓react-native run-ios 的時(shí)候找到 .xcodeproj 文件 能夠運(yùn)行起來(lái)。
6、在 ios 文件下創(chuàng)建 Podfile文件，用來(lái)配置?所需要使用的 組件。
$vi Podfile ?
內(nèi)容如下：
platform:ios,'8.0' ?#適配平臺(tái)
target 'TabBarTest' do ?#目標(biāo)文件
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開(kāi)啟開(kāi)發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0，則加入下面這行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
7、$pod install ? ? 沒(méi)有報(bào)錯(cuò)的話，恭喜你，環(huán)境配置成功了！
8、在根目錄下，創(chuàng)建一個(gè)ios.index.js 文件，既然是混合開(kāi)發(fā)，沒(méi)有點(diǎn) js文件說(shuō)不過(guò)去。代碼很簡(jiǎn)單，如下：
'use strict'import React,{Component} from 'react';
import { AppRegistry, Text, View} from 'react-native';
class TestView extends Component{
????render(){
????????return(<Text>It is a text</Text>)
????}
}
AppRegistry.registerComponent('MyReactNativeApp',()=>TestView);
9、在xcode項(xiàng)目中，引用?#import <React/RCTRootView.h> 頭文件，用來(lái)裝 js 的頁(yè)面
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://host:8081/index.ios.bundle?platform=ios"];
//? ? NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"MyReactNativeApp"
initialProperties :nil
launchOptions? ? : nil];
self.view = rootView;
ps：運(yùn)行時(shí)產(chǎn)生以下錯(cuò)誤:Could not connect to development server.?
Ensure?thefollowing:
-?Node?server?is?running?and?available?on?the?same?network?-?run'npm?start'from?react-native?root
-?Node?server?URL?is?correctly?set?in?AppDelegate
將host 切換成你本地的ip。
10、在根目錄下，啟動(dòng)終端。$npm start ? 啟動(dòng)開(kāi)發(fā)服務(wù)器，這個(gè)終端是不能關(guān)閉的哦
11、可以通過(guò)Go2Shell （App Store 自行下載）重啟一個(gè)終端 $react-native run-ios ?運(yùn)行iOS模擬器。
如果出現(xiàn)錯(cuò)誤，$npm install 關(guān)閉終端重啟一下，在運(yùn)行。
在環(huán)境配置的過(guò)程中可能出現(xiàn)很多問(wèn)題，需要你安裝、升級(jí)一些文件。一般報(bào)錯(cuò)問(wèn)題，度娘都能解決的。
Good Luck ～
