安裝依賴
按照官方的說法俩垃，必須安裝的依賴有Node绒疗、Watchman 和 React Native 命令行工具以及 Xcode谦去。
Node, Watchman
官方推薦使用Homebrew來安裝 Node 和 Watchman。
安裝Homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安裝 Node 和 Watchman：
brew install node
brew install watchman
如果你已經(jīng)安裝了 Node赎瑰，檢查node版本號(hào)（node -v ）薄声，但不是最新的版本当船，輸入一些命令進(jìn)行更新，或者直接去進(jìn)行下載：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Watchman則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具默辨。安裝此工具可以提高開發(fā)時(shí)的性能（packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時(shí)刷新）德频。
Yarn、React Native 的命令行工具（react-native-cli）
Yarn是 Facebook 提供的替代 npm 的工具缩幸，可以加速 node 模塊的下載抱婉。React Native 的命令行工具用于執(zhí)行創(chuàng)建档叔、初始化、更新項(xiàng)目蒸绩、運(yùn)行打包服務(wù)（packager）等任務(wù)衙四。但是在這里，并沒有去集成Yarn患亿，依然使用的是npm工具传蹈。
npm install -g yarn react-native-cli
到這里為止React Native的依賴環(huán)境基本已經(jīng)配置好了。
Xcode
Xcode的命令行工具???????
React Native 目前需要Xcode 9.4 或更高版本步藕。啟動(dòng) Xcode惦界，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具咙冗，比如git等沾歪。
React Native創(chuàng)建新項(xiàng)目
創(chuàng)建新項(xiàng)目
使用 React Native 命令行工具來創(chuàng)建一個(gè)名為"AwesomeProject"的新項(xiàng)目：
cd /Users/zq/Desktop/Test
react-native init AwesomeProject
編譯并運(yùn)行 React Native 應(yīng)用
cd AwesomeProject
react-native run-ios
官方說很快就應(yīng)該能看到 iOS 模擬器自動(dòng)啟動(dòng)并運(yùn)行你的項(xiàng)目，其實(shí)并不是這樣的雾消，第一次運(yùn)行的時(shí)長長的讓人崩潰灾搏，但是我們依然的堅(jiān)持等待。
Xcode
Xcode的命令行工具???????
React Native 目前需要Xcode 9.4 或更高版本立润。啟動(dòng) Xcode狂窑，并在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個(gè)版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具桑腮，比如git等泉哈。
React Native創(chuàng)建新項(xiàng)目
創(chuàng)建新項(xiàng)目
使用 React Native 命令行工具來創(chuàng)建一個(gè)名為"AwesomeProject"的新項(xiàng)目：
cd /Users/zq/Desktop/Test
react-native init AwesomeProject
編譯并運(yùn)行 React Native 應(yīng)用
cd AwesomeProject
react-native run-ios
官方說很快就應(yīng)該能看到 iOS 模擬器自動(dòng)啟動(dòng)并運(yùn)行你的項(xiàng)目，其實(shí)并不是這樣的破讨，第一次運(yùn)行的時(shí)長長的讓人崩潰丛晦，但是我們依然的堅(jiān)持等待。
iOS的原生項(xiàng)目集成ReactNative
配置項(xiàng)目目錄結(jié)構(gòu)
在我們已經(jīng)創(chuàng)建好的工程中提陶，創(chuàng)建一個(gè)ReactNativeComponent的文件夾烫沙，進(jìn)行備用.如圖：
在ReactNativeComponent目錄中創(chuàng)建package.json文件，并填入一下內(nèi)容：
{
"name": "ReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
注意："name": "ReactNative" 搁骑，ReactNative是項(xiàng)目名，需要改成你自己的工程名
打開終端又固，然后cd ReactNativeComponent的目錄路徑仲器，如下：
cd /Users/zq/Desktop/ReactNative/ReactNativeComponent
然后運(yùn)行下列命令來安裝：
npm add react-native
這樣默認(rèn)會(huì)安裝最新版本的React Native，同時(shí)會(huì)打印出類似下面的警告信息（你可能需要滾動(dòng)屏幕才能注意到）：
警告“react-native@0.52.2”有未滿足的同伴依賴“react@16.2.0”仰冠。
這是正撤剑現(xiàn)象，意味著我們還需要安裝指定版本的React(箭頭指向的位置)：
npm add react@16.8.3
配置CocoaPods的依賴
在終端中cd 工程目錄洋只，然后輸入pod init創(chuàng)建Podfile文件辆沦，然后在Podfile文件中輸入需要集成的文件昼捍，如下：
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => './ReactNativeCompent/node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47則加入此行
'DevSupport', # 如果RN版本 >= 0.43肢扯，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 調(diào)試功能需要此模塊
'RCTAnimation', # FlatList和原生動(dòng)畫功能需要此模塊
# 在這里繼續(xù)添加你所需要的其他RN模塊
]
# # 如果你的RN版本 >= 0.42.0妒茬，則加入下面這行
pod 'yoga', :path => './ReactNativeCompent/node_modules/react-native/ReactCommon/yoga'
#
# 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴
pod 'DoubleConversion', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/Folly.podspec'
??路徑一定不要寫錯(cuò)，node_modules的路徑要和自己項(xiàng)目的目錄匹配（ReactNativeCompent要改為自己所創(chuàng)建的文件名）蔚晨。
如果在你終端中輸入pod install命令乍钻，爆出一下錯(cuò)誤，恭喜你路徑寫錯(cuò)了铭腕，你需要再仔細(xì)檢查一下你的文件路徑了银择。
pod 集成這一部分比是較耗時(shí)的，但是一定要耐心等待累舷，畢竟好事多磨浩考。
代碼集成
現(xiàn)在我們已經(jīng)準(zhǔn)備好了所有依賴，可以開始著手修改原生代碼來把React Native真正集成到應(yīng)用中了被盈。
創(chuàng)建一個(gè)index.js文件
首先在ReactNativeCompent目錄下創(chuàng)建一個(gè)空的index.js文件析孽。
添加你自己的React Native代碼
在index.js中添加你自己的組件。我們這里只是簡單的添加一個(gè)<Text>組件害捕，用然后一個(gè)帶有樣式的<View>組件把它包起來绿淋。
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props['scores'].map((score) => (
<Text key={score.name}>
{score.name}:{score.value}
{'\n'}
</Text>
));
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>2048 High Scores!</Text>
<Text style={styles.scores}>{contents}</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,
},
});
// 整體js模塊的名稱
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
3、JS調(diào)用
首先導(dǎo)入RCTRootView的頭文件
#import <React/RCTRootView.h>
然后調(diào)用JS文件
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"RNHighScores"
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];
}
為了保證能正常連接本地啟動(dòng)的 rn 服務(wù)器,需要在 info.plist 文件中添加以下內(nèi)容
運(yùn)行
到這里并不是所有工作已經(jīng)完成尝盼，可以放心運(yùn)行項(xiàng)目了吞滞，我們還有最后的工作需要做。
運(yùn)行之前我們還需要開啟服務(wù)器盾沫，很簡單裁赠，只需兩步：
1、cd /Users/zq/Desktop/ReactNative/ReactNativeComponent
2赴精、npm start
如果出現(xiàn)一下結(jié)果佩捞，就代表服務(wù)器已經(jīng)成功打開了。
現(xiàn)在就可以放心的運(yùn)行項(xiàng)目了蕾哟。運(yùn)行結(jié)果如下：
參考資料
React Native中文網(wǎng)：https://reactnative.cn/docs/integration-with-existing-apps/
