要求：

1桩盲、熟悉Xcode編程

2、了解終端常用命令

3湃番、會(huì)用CocoaPods做iOS程序的依賴管理

第一步：開發(fā)環(huán)境搭建

1夭织、CocoaPods的安裝，如果已安裝完吠撮，直接跳過該步驟尊惰。

2、搭建RN開發(fā)環(huán)境，如果已經(jīng)搭建好弄屡，直接跳過該步驟戴卜。

第二步：把React Native組件嵌入到iOS

1、設(shè)置項(xiàng)目目錄結(jié)構(gòu)

打開現(xiàn)有的iOS項(xiàng)目琢岩，在其中創(chuàng)建一個(gè)/ios子目錄；然后將根目錄中所有的iOS文件都拷貝到 /ios?子目錄中师脂。

設(shè)置項(xiàng)目目錄結(jié)構(gòu)

2担孔、安裝JavaScript依賴包

2.1、創(chuàng)建安裝依賴包文件package.json

打開終端吃警，cd到根目錄糕篇，執(zhí)行命令

$ ?npm init

跟著提示一步步執(zhí)行，主要設(shè)置的是名字(name?不支持大寫)和版本酌心，其他默認(rèn)或者不輸入拌消。

創(chuàng)建安裝依賴包文件package.json

執(zhí)行成功之后會(huì)看到基本的json樣式，可以在根目錄中看到創(chuàng)建成功的package.json文件安券。

package.json文件

2.2墩崩、配置安裝依賴包文件package.json

按下圖紅色區(qū)域方式配置package.json文件。

"private": true,

"scripts": {

????"start": "node node_modules/react-native/local-cli/cli.js start"

},

配置安裝依賴包文件package.json

2.3侯勉、添加JS環(huán)境

使用終端鹦筹，cd到根目錄，執(zhí)行下面的命令

$ npm install --save react

$ npm install --save react-native

2.4址貌、報(bào)錯(cuò)處理

執(zhí)行完铐拐，可能會(huì)出現(xiàn)下圖中的報(bào)錯(cuò)信息。

報(bào)錯(cuò)信息

報(bào)錯(cuò)信息1：

npm WARN react-native@0.55.4 requires a peer of react@16.3.1 but none is installed. You must install peer dependencies yourself.

解決方案：執(zhí)行命令

$ npm install --save react@16.3.1

報(bào)錯(cuò)信息2：

npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

解決方案：Xcode方式打開package.json文件练对，添加如下兩行遍蟋，然后回到終端，執(zhí)行命令

$ npm install

添加依賴

補(bǔ)充：dependencies中的react和react-native的版本取決于你的具體需求螟凭，推薦使用最新版本虚青。可以使用下面的命令查看當(dāng)前的最新版本赂摆。

$ npm info react

$ npm info react-native

成功安裝JavaScript依賴包挟憔，會(huì)看到根目錄多了2個(gè)文件。

成功安裝JS依賴包

3烟号、創(chuàng)建Podfile文件

3.1绊谭、創(chuàng)建Podfile

終端cd到/ios子目錄,?執(zhí)行下面命令

$ pod init

創(chuàng)建Podfile

3.2、配置Podfile

# Uncomment the next line to define a global platform for your project

# 別忘了把這里的注釋去掉

platform :ios, '9.0'

# target的名字一般與你的項(xiàng)目名字相同

target 'RNInsertApp' do

? ? # 'node_modules'目錄一般位于根目錄中

? ? # 但是如果你的結(jié)構(gòu)不同汪拥，那你就要根據(jù)實(shí)際路徑修改下面的':path'

? ? pod 'React', :path => '../node_modules/react-native', :subspecs => [

? ? ? ? 'Core',

? ? ? ? 'CxxBridge',

? ? ? ? 'DevSupport',

? ? ? ? 'RCTText',

? ? ? ? 'RCTNetwork',

? ? ? ? 'RCTWebSocket',

? ? ]

? ? # 如果你的RN版本 >= 0.42.0达传，則加入下面這行

? ? pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

? ? # 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴

? ? 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'

end

配置Podfile

3.3、安裝React Native的pod包

創(chuàng)建好了Podfile后，就可以開始安裝React Native的pod包了宪赶。執(zhí)行命令

$ pod install

安裝React Native的pod包

4宗弯、index.js文件（rn的入口函數(shù)）

4.1、創(chuàng)建index.js文件

終端cd到根目錄,?執(zhí)行下面命令

$ touch index.js

創(chuàng)建index.js文件

4.2搂妻、添加你自己的React Native代碼

React Native代碼

5蒙保、編寫代碼調(diào)用RN

打開/ios子目錄中的".xcworkspace"，編寫調(diào)用RN代碼欲主。

調(diào)用RN代碼

6邓厕、配置info.plist

Apple默認(rèn)會(huì)阻止讀取不安全的HTTP鏈接，我們需要把本地運(yùn)行的Packager服務(wù)添加到info.plist中扁瓢，以便能正常訪問Packager服務(wù)详恼。

NSAppTransportSecurity

NSExceptionDomains

localhost

NSTemporaryExceptionAllowsInsecureHTTPLoads

配置info.plist

7、運(yùn)行Package

運(yùn)行Package引几，啟動(dòng)開發(fā)服務(wù)器昧互。終端cd到項(xiàng)目根目錄中，?執(zhí)行下面命令

$ npm start

運(yùn)行Package

8伟桅、運(yùn)行應(yīng)用

打開/ios子目錄中的".xcworkspace"敞掘，運(yùn)行應(yīng)用。

運(yùn)行應(yīng)用

項(xiàng)目源碼

RN嵌入原生App源碼

參考博客

reactnative.cn