react native （五）嵌入到原生應用
今天一天算是隻研究了這部分，現在把不用終端 react native init命令建立工程，直接在現有的工程上嵌入react native，現將步驟歸結如下：
1.先建一個空資料夾實際上（命名我都和現有xcode工程名相同）然後把你工程的資料夾拽入該資料夾中，並將工程資料夾改為ios（目的和官方文件上一直，我感覺這樣也不容易出錯）如圖：
現在把你的工程cocopops管理（cocopops安裝就濾過啦） ，因為後面要用它來載入庫
2.現在工程新增好，開始建立package.json檔案
這個簡單，建立一個空的json檔案，然後將下面一段程式碼複製到裡面
{
“name”: “realNameAction”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
},
“dependencies”: {
“react”: “15.0.2”,
“react-native”: “0.38.0”
}
}
將上面的name改為你的專案名稱,react-native改為你當前的react native版本（開啟你當時 react native init命令建立的工程的package.json檔案就一目瞭然啦，改改的就改好啦，這樣也是確保不出錯嘛），將package.json檔案放到根目錄下面。
3.安裝依賴包
開啟的你終端切到你的根目錄資料夾（cd /Users/sich/realNameAction ）然後
$ npm install
等個幾十秒，可以看到在根目錄下多了一個資料夾，走到這步可以看到目錄是這樣的啦。
4.Podfile檔案
target ‘realNameAction’ do
pod ‘React’, :path => ‘../node_modules/react-native’, :subspecs => [
‘Core’,
‘RCTText’,
‘RCTNetwork’,
‘RCTWebSocket’,
]
end
注意改為您的工程名字，注意如果你上一步完成的node_modules沒在你的根目錄下面
，上面的:path => ‘../node_modules/react-native’需要你調整為自己的路徑
最後把Podfile檔案安裝上就好啦。
5.走到這一步，恭喜您已經配置好，接下來就是index.ios.js了，還是放到根目錄下面
終端切到根目錄下面，然後
touch index.ios.js
這樣就建立了一個空的index.ios.js檔案
這樣所有的檔案就建立好啦，嘿嘿
6.編寫您的js程式碼，你可以先用官網的程式碼測試一下效果，現將官網的程式碼貼上下面
‘use strict’;
import React from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;
class realNameAction extends React.Component {
render() {
var contents = this.props[“scores”].map(
score => {score.name}:{score.value}{“\n”}
);
return (
2048 High Scores!
{contents}
);
}
}
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,
},
});
// 整體js模組的名稱
AppRegistry.registerComponent(‘realNameAction’, () => realNameAction);
realNameAction要改為你自己的Xcode工程名哦。
7.嵌入xcode專案中。
開啟xcode專案，在你需要載入js的地方寫入以下程式碼：
NSURL *jsCodeLocation = [NSURL
URLWithString:@”http://localhost:8081/index.ios.bundle?platform=ios“];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @”realNameAction”
initialProperties :
@{
@”scores” : @[
@{
@”name” : @”Alex”,
@”value”: @”42”
},
@{
@”name” : @”Joel”,
@”value”: @”10”
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
注意加上標頭檔案
import “RCTRootView.h”
其中8081是預設的埠號，localhost是指您的電腦，可以用你電腦的IP（不知道為什麼在我測試的時候用localhost，一直報沒法訪問到伺服器，而換為電腦IP地址就好啦）。
8.執行測試
首先要啟動終端（貌似就是建立了一個伺服器 ，我也不知道這樣理解對不對）
首先切到node_modules目錄（我的：cd /Users/sich/realNameAction/node_modules）
然後執行：
$ npm start
這樣就可以看到啟動了，其中也可以看到埠預設的為8081，其中執行xcode模擬器，預設的是iPhone6，注意在整個測試過程中，該終端不要關閉。執行在模擬器上可以看到效果，在修改js後可以直接common+R重新整理模擬器，後common+D然後Reload。
真機測試：真機測試要保證你的手機與電腦在同一網路，並設定埠號為8081：
設定—》無線區域網—》選中要連線的網路進入，下面HTTP代理處選擇手動，伺服器是你連線的電腦的IP，埠預設的8081，這樣就OK啦。