項目已經迭代了很多版本，目前想在里面集成React native。以下是操作步驟，由于一些坑已經趟過，直接按照解決后的順序下的步驟。本文集成的RN版本是 ?0.51.0
集成篇
步驟1：設置項目目錄結構
首先創建一個空目錄用于存放React Native項目，然后在其中創建一個/ios子目錄，把你現有的iOS項目拷貝到/ios子目錄中。
步驟2：安裝JavaScript依賴包
在項目根目錄下創建一個名為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.51.0”?
????}
}
執行命令 ? npm install
步驟3：安裝CocoaPods（如果已經安裝就不需要安裝了）
CocoaPods是針對iOS和Mac開發的包管理工具。我們用它來把React Native框架的代碼下載下來并添加到你當前的項目中。?
配置CocoaPods的依賴#React Native框架整體是作為node模塊安裝到項目中的。下一步我們需要在CocoaPods的Podfile中指定我們所需要使用的組件。在你開始把React Native集成到你的應用中之前，首先要決定具體整合的是React Native框架中的哪些部分。而這就是subspec要做的工作。在創建Podfile文件的時候，需要指定具體安裝哪些React Native的依賴庫。所指定的每一個庫就稱為一個subspec。可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般來說你首先需要添加Core，這一subspec包含了必須的AppRegistry、StyleSheet、View以及其他的一些React Native核心庫。如果你想使用React Native的Text庫（即組件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。
我們需要在Podfile文件中指定所需的subspec。創建Podfile的最簡單的方式就是在/ios子目錄中使用CocoaPods的init命令：
創建 Podfile 文件， 命令： pod init
Podfile會創建在執行命令的目錄中。你需要調整其內容以滿足你的集成需求。調整后的Podfile的內容看起來類似下面這樣：
platform :ios, '8.0'
target ‘xxxxx’ do
????pod 'SDWebImage', '~> 3.8.2'
????pod 'AFNetworking', '~> 3.0.1'
????pod 'MJRefresh' pod 'yoga', :path => '../node_modules/react-????native/ReactCommon/yoga'
????pod 'React', :path => '../node_modules/react-native', :subspecs => [
????????????'Core',
? ? ? ? ? ? ?'CxxBridge', # 如果RN版本 >= 0.45則加入此行
? ? ? ? ? ? ?'DevSupport',# 如果RN版本 >= 0.43，則需要加入此行才能開啟開發者菜單
????????????'RCTText',
????????????'RCTNetwork',
????????????'RCTWebSocket', # 這個模塊是用于調試功能的 # 在這里繼續添加你所需要的RN模塊
????]
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
創建好了Podfile后，就可以開始安裝React Native的pod包了。
執行命令:? pod install
如果未出現xcworkspace 文件，那么更新cocoapods 版本，重新install。
install時有幾個庫特別慢，這里參考 RN中文網?
注意：自己弄的時候，boost的庫版本（取決于你rn的版本）和上面鏈接里面給出的版本不一致。建議自己根據版本號在?boost官網 下載下來，下載下來后請copy到 ? ? ?~/.rncache
另外需要做幾個配置：
1、配置自己的TARGEETS，Build Setting->Linking->Other Linker Flags，添加$(inherited)
2、配置pod PROJECT，Build Setting->Valid Architectures? 為 armv7 arm64
3、配置自己的TARGEETS，Build Setting->Search Paths->User Header Search Path? 為$(PODS_ROOT)，并選擇為 recursive
4、配置自己的TARGEETS，Build Setting->Build Active Architecture Only 的debug 改為yes
注：編譯后生成的三方庫的.a文件的位置在
/Users/自己mac的用戶名/Library/Developer/Xcode/DerivedData/xxxxx-dpnlhuluxbuuuggyyhxbpkzutkvl/Build/Products/Debug-iphoneos/
做到此，那么工程已經全部集成進來了
RN運行篇
1、編輯生成個index.js文件，放到主目錄下
其中 ?0.49.0 版本以前 index.ios.js 。?內容為
import React from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class RNHighScores extends React.Component
{
????render() {
? ? ? ? return (
? ? ? ? ? ? <View stayle={styles.container}>
? ? ? ? ? ? ? ? ? ?<Text style={styles.highScoresTitle}>?????
????????????????????????測試1
????????????????????</Text>
? ? ? ? ? ? ? ? ? ? <Text style={styles.scores}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? 測試2
????????????????????</Text>
? ? ? ? ? ? </View>
????????);
? ? ?}
}
const styles = StyleSheet.create({
????container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', },
????highScoresTitle: { fontSize: 20, textAlign: 'center', margin: 10, },
????scores: { textAlign: 'center', color: '#333333', marginBottom: 5, },
});
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);
2、項目中增加跳轉，主要是寫個點擊事件。執行方法內容為
NSURL *jsCodeLocation;? ?
jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.bundle?platform=ios"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? moduleName:@"MyReactNativeApp" ? ? initialProperties:nil ?launchOptions:nil]; ? ? UIViewController *vc = [[UIViewController alloc] init];?
?vc.view = rootView;? ? [self.navigationController pushViewController:vc animated:YES];
3、打開工程運行，點擊按鈕，發現報錯了? “react-native No bundle URL present”
別慌，因為沒bundle，bundle 是干啥的呢？這個是rn的資源文件，所有的js 文件會在這個里面的。
分三種情況：
????1、開發模式，一般是命令行進入主目錄，然后執行? npm start ，此時bundle可以下載（服務器就是本機）
? ? 2、release 模式，會將bundle打包到項目里。(使用curl命令生成 main.jsbundle
curl?http://localhost:8081/index.ios.bundle?-o main.jsbundle
)
注釋： 你可以用 react-native-xcode.sh 來幫助部署，路徑 node_modules/react-native/scripts/ ?
? ? 3、已經發布的包更行，會出發下在，然后替換打到項目里的 bundle
我們開發階段，采用第一種。
運行項目，恭喜你，已經集成成功了。
頁面的具體開發，需要您不斷探索了。
希望以上對你有幫助。 ?以上部分內容參考 ?RN中文網
