一.首先來搭建React Native環(huán)境
- 安裝Homebrew
- 安裝NodeJS
- 安裝yarn
- 安裝Watchman
- Xcode
- 測試
1.安裝Homebrew
Homebrew,Mac系統(tǒng)的包管理器(套件管理工具)谁不，可以用來安裝NodeJS及其他的軟件并對他們進行管理
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果homebrew在安裝軟件時可能會碰到/usr/local/目錄不可寫的權(quán)限問題。可以使用下面的命令來修復(fù)：
sudo chown -R `whoami` /usr/local
2.安裝NodeJS
- 安裝node
brew install node
- 設(shè)置npm鏡像用來加速后面軟件的安裝。
npm config set registry https://registry.npm.taobao.org --global
或者:
npm config set disturl https://npm.taobao.org/dist --global
3.安裝yarn
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載器躏。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目褒傅、運行打包服務(wù)（packager）等任務(wù)
npm install -g yarn react-native-cli
安裝完yarn同樣也要設(shè)置鏡像
npm config set registry https://registry.npm.taobao.org --global
或者:
npm config set disturl https://npm.taobao.org/dist --global
如果出現(xiàn)EACCES: permission denied的權(quán)限報錯，修復(fù)/usr/local目錄的所有權(quán):
sudo chown -R `whoami` /usr/local
安裝完yarn之后就可以使用yarn代替npm了袄友，例如用yarn代替npm install命令殿托，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
4.安裝Watchman
Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具剧蚣。安裝此工具可以提高開發(fā)時的性能（packager可以快速捕捉文件的變化從而實現(xiàn)實時刷新）支竹。
brew install watchman
5.安裝Xcode（App Store下載）
6.測試
安裝好了上面的軟件之后，來進行：
- 在mac的根目錄創(chuàng)建一個myRNProject的文件夾
react-native init myRNProject
不帶版本號創(chuàng)建的是最新版本的RN
- 指定版本創(chuàng)建
react-native init myFirstRNProject --version 0.50
-
提示如下：
屏幕快照 2018-07-03 下午2.06.37.png - 根據(jù)提示啟動我們需要的iOS部分項目
cd /Users/zl/myRNProject
react-native run-ios
或者直接打開
myRNProject.xcodeproj文件來啟動
注意： 啟動之后鸠按，Mac會自動開啟一個終端的對話框礼搁，這個對話框在項目的開啟期間必須要一直打開著，如果被關(guān)閉目尖，整個項目也就被關(guān)閉了馒吴。
如果一切正常，說明項目就是創(chuàng)建成功了
對話框：
項目文件夾：
新版本在
APP.JS文件夾中進行中編碼瑟曲。
如果是049之前的版本饮戳，在index.js中。
二.搭建Xcode項目集成環(huán)境
1.在mac電腦桌面上touch命令創(chuàng)建一個空的文件夾iOS-RN
2. 在 iOS-RN 文件夾中洞拨，創(chuàng)建一個/ios文件
- 在/ios文件中將存放原生項目中所有的文件扯罐。直接將原生項目中的文件復(fù)制一份拷貝過來即可
3. 安裝JavaScript依賴包: package.js文件
- 在項目根目錄(和/ios平級)下創(chuàng)建一個名為package.json的空文本文件，然后填入以下內(nèi)容：
{
"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 版本
"react-native": "0.51" //這里指定了RN的版本
}
}
scripts中是用于啟動packager服務(wù)的命令扣甲。dependencies中的react和react-native的版本取決于你的具體需求篮赢。一般來說我們推薦使用最新版本。你可以使用npm info react和npm info react-native來查看當(dāng)前的最新版本琉挖。另外启泣，react-native對react的版本有嚴(yán)格要求，高于或低于某個范圍都不可以示辈。本文無法在這里列出所有react native和對應(yīng)的react版本要求寥茫，只能提醒讀者先嘗試執(zhí)行npm install，然后注意觀察安裝過程中的報錯信息矾麻，例如require react@某.某.某版本, but none was installed纱耻，然后根據(jù)這樣的提示芭梯，執(zhí)行npm i -S react@某.某.某版本。如果你使用多個第三方依賴弄喘，可能這些第三方各自要求的react版本有所沖突玖喘，此時應(yīng)優(yōu)先滿足react-native所需要的react版本。其他第三方能用則用蘑志，不能用則只能考慮選擇其他庫
- 安裝依賴包：
$ npm install
4.在原生項目中使用CocoaPod添加RN依賴文件
- 使用終端cd進入到/ios文件中累奈，安裝CocoaPod依賴包管理系統(tǒng)。（這里推薦使用CocoaPods急但，如果之前的原生項目中沒有安裝的話澎媒，需要自行想辦法安裝一個）。
對于已經(jīng)安裝了CocoaPod 的項目波桩，我們進入到對應(yīng)的podfile文件
$ vim podfile
- 在podfile文件中添加以下內(nèi)容：
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同戒努，那你就要根據(jù)實際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45則加入此行
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的RN模塊
]
# 如果你的RN版本 >= 0.42.0镐躲，則加入下面這行:
`pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"`
# 這里注意： 如果是0.49以下的RN储玫，則使用下面這條：
` pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"`
# 如果RN版本 >= 0.45則加入下面三個第三方編譯依賴
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'
- 更新Pod
$ pod install
更新成功之后，我們在項目中就可以通過import React使用React提供的庫文件了匀油。
三缘缚、橋接RN和iOS項目中的內(nèi)容
使用RN寫一個“歡迎來到聯(lián)盟” 的界面，然后在原生的項目中使用這個界面:
1. 創(chuàng)建index.js文件
- 在和ios文件夾平級的目錄下（根目錄）敌蚜，使用
$ touch index.js
創(chuàng)建index.js文件(RN的入口文件)，如果是版本 0.49之前的RN窝爪，那么應(yīng)該創(chuàng)建index.ios.js文件
2. 在index.js文件寫入測試代碼：
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class LauchView extends React.Component {
render() {
var contents = this.props.rootTag;
return (
<View style={styles.center}>
<Text >
{this.props.content}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
center: {
marginTop: 50,
width:120,
height: 60,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:"red"
},
});
// 整體js模塊的名稱
AppRegistry.registerComponent('LauchView', () => LauchView);
上面代碼的意思是頁面上創(chuàng)建了一個包含“Hello World”文字的<text>控件
3.編寫原生代碼對接RN
- 在AppDelegate文件中弛车，將RN編寫的“Hello world”界面設(shè)置成window的根視圖。
導(dǎo)入import React,然后didFinishLaunchingWithOptions函數(shù)中：
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
self.window = UIWindow.init(frame: CGRect.init(x: 0, y: 0, width: ScreenWidth, height: ScreenHeight))
self.window?.makeKeyAndVisible()
// 如果是真機調(diào)試蒲每，使用電腦的IP地址纷跛。
// let url = URL.init(with: "http://192.168.0.174:8081/index.bundle?platform=ios")
// 如果使用模擬器，可用本地服務(wù)器的端口邀杏。
let url = URL.init(with: "http://localhost:8081/index.bundle?platform=ios")
let rootView = RCTRootView.init(bundleURL: url, moduleName: "LauchView", initialProperties: [ "content":"Hello world"], launchOptions: nil)
let VC = UIViewController.init()
VC.view = rootView
self.window?.rootViewController = VC
return true
}
注意：
LauchView 的名稱必須和RN中注冊的名稱一模一樣贫奠。不然會無法識別的。
這段代碼的意思就是從RN中加載一個頁面（這個頁面就是我們寫的“Hello world”頁面）望蜡，然后作為window的根視圖展示
4. 啟動RN項目
使用終端唤崭，cd 進入到項目的根目錄，就是上面說的 iOS-RN文件夾脖律，在這里可以看到 index.js文件谢肾。
輸入命令行：
$ npm start
RN項目開始啟動，終端框中看到提示：Loading dependency graph, done.小泉，說明RN啟動完成芦疏。注意:
不要關(guān)閉這個終端冕杠，如果需要使用終端執(zhí)行其他的命令，可以新建窗口酸茴。
至此分预，所有的RN依賴庫都加載完畢，可以在Xcode使用了
5.運行Xcode
- 選擇模擬器薪捍，comand+R
