React Native移植iOS原生項目

標籤：

手工整合React Native第一步：初始化React Native環境

在我們要整合的項目中，進入到*.xcodeproj檔案的上級目錄，運行React Native初始化命令react-native init [Project Name]
會出現prompt, 輸入yes,這樣會在ios目錄下產生一個同名工程。init過程會需要一點時間，耐心等待。

完成後專案檔目錄會變成這樣：

• node_modules:react native依賴包
• ios:iOS項目相關代碼，Xcode工程檔案
• android:Android項目相關代碼
• index.ios.js:iOS平台載入的JS指令碼
• index.android.js：Android平台載入的JS指令碼
• package.json：當前項目的npm package的設定檔，內容如下：

?

1	{ "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "name": "Project", "dependencies": { "react": "^15.1.0", "react-native": "^0.27.2" }, "version": "0.0.1" }

接下來，我們可以先把Android相關的檔案給幹掉：

• android
• index.android.js
• node_modules/react-native/android
• node_modules/react-native/ReactAndroid

第二步：添加React Native的Libraries

開啟ios目錄下的那個同名工程，可以看到這個工程引用的React Native庫如下：

開啟我們原有的項目，右鍵工程目錄，選擇New Group,建立一個名為Libraries的目錄
然後把前面項目Libraries下的*.xcodeproj檔案全部拖到這個項目的Libraries下，效果跟一樣。

第三步：添加React Native shell指令碼

React Native的iOS項目在編譯時間會先運行一個shell指令碼，其作用有兩個：

• 從Terminal啟動了一個Node.js的server用於React Native調試
• 將React Native的資源檔打包放在編譯目錄下

具體添加方式：

• 選擇TARGETS的Build Phases介面,點擊左上方的+號

• 選擇New Run Script Phase添加一個指令碼，並命名為Bundle React Native code and images/li>
• 把ios下工程中的指令碼引用代碼複製過來，如。注意路徑，因為我們的原有的*.xcodeproj檔案跟node_modules是在同一個目錄下的，所以我們要去掉兩個點中的一個點。

第四步：連結.a檔案和添加搜尋標頭檔的地址

到這一步，我們就可以幹掉ios目錄了，然後關閉原有的工程，再重新開啟。
在工程的Build Phases介面的Link Binary With Libraries,點擊
最下面的+號，可以看到在Workspace下多了很多.a檔案，如，把它們全部添加進去。

• 接下來還需要添加React的搜尋標頭檔，在TARGETS->Build Settings->Header Search Paths中添加一條$(SRCROOT)/node_modules/react-native/React,選擇recursive,如所示。

第五步：編譯

我們先編譯一下，會發現編譯不通過,一堆報錯。
原因是我們還沒有匯入JavaScriptCore庫。因為React Native與原生的互動需要依賴於JavaScriptCore.framework。
再次編譯，發現可以編譯成功了。

測試回合React Native介面

在AppDelegate.m中的didFinishLaunchingWithOptions:方法中添加如下代碼：

?

1234567891011

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                      moduleName:@"Project"                                               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];

CMD+R運行，會看到如下介面：

React Native移植iOS原生項目