前提
已經配置好React Native命令行環境
1. 通過CocoaPods集成React Native
參考官方文檔：
https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content
使用CocoaPods集成會出現很多問題，下面重點講一下如何在原有項目中手工快速集成React Native。
2. 手工集成React Native
第一步：初始化React Native環境
運行React Native初始化命令react-native init [Project Name]，init過程會需要一點時間，耐心等待。
以下是執行react-native init Text的效果：
完成后項目文件目錄會變成這樣：
-
node_modules:react native依賴包 -
ios:iOS項目相關代碼，Xcode工程文件 -
android:Android項目相關代碼 -
index.ios.js:iOS平臺加載的JS腳本 -
index.android.js：Android平臺加載的JS腳本 -
package.json：當前項目的npm package的配置文件，內容如下：
{
"name": "Test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}
第二步：添加React Native的Libraries
- 復制原iOS項目至
package.json同級目錄
- 查看示例項目的Libraries列表
打開ios目錄下的那個同名工程，可以看到這個工程引用的React Native庫如下：
-
設置與示例項目相同的Libraries列表
打開我們原有的項目，右鍵工程目錄，選擇
New Group without Folder,新建一個名為Libraries的目錄然后把前面項目
Libraries下的*.xcodeproj文件全部拖到這個項目的Libraries下。
image- 因為
Libraries中的工程已被Test項目引用，所以Demo項目不能正確引用。關閉所有項目，先打開Demo項目。
第三步：添加React Native shell腳本
作用：將React Native的資源文件打包放在編譯目錄下, 從Terminal啟動了一個Node.js的server用于React Native調試
- 選擇
TARGETS的Build Phases界面,點擊左上角的+號
選擇
New Run Script Phase添加一個腳本，并命名為Bundle React Native code and images把示例工程中的腳本引用代碼復制過來，如下圖。注意路徑。
第四步：鏈接.a文件和添加搜索頭文件的地址
- 在工程的
Build Phases界面的Link Binary With Libraries,點擊
最下面的+號，可以看到在Workspace下多了很多.a文件，如下圖，把它們全部添加進去。
- 接下來還需要添加
React的搜索頭文件，在TARGETS -> Build Settings -> Header Search Paths中添加一條$(SRCROOT)/node_modules/react-native/React,選擇recursive,如下圖所示。
-
TARGETS -> Build Settings -> Other Linker Flags設置為-ObjC -lc++
第五步：在Edit Scheme的Build中添加React
- 選擇
Demo Scheme執行Edit Scheme操作
-
Build中添加React，并拖拽到最上位置,并取消勾選Parallelize Build選項。這一步很關鍵,因為項目需要先編譯React.a文件。
第六步：測試運行React Native界面
- 添加頭文件
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
- 在
AppDelegate.m中的didFinishLaunchingWithOptions:方法中添加如下代碼：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Test"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
第七步：更新App Transport Security
直接運行項目會報Could not connect to development server錯誤，在iOS 9以上的系統中，除非明確指明，否則應用無法通過http協議連接到localhost主機。 我們建議你在Info.plist文件中將localhost列為App Transport Security的例外。 如果不這樣做，在嘗試通過http連接到服務器時，會遭遇這個錯誤 - Could not connect to development server.
打開工程中的Info.list文件，添加下面配置即可：
第八步：運行工程
-
CMD+R運行，會看到如下界面：
至此，原有項目集成React Native大功告成。祝在React Native的世界中玩得開心！
