通常情況下我們有兩種方式來構(gòu)建一個使用RN技術(shù)的應用：
- RN包原生抢腐。應用入口由RN控制畴蒲，頁面跳轉(zhuǎn)邏輯也由RN主導篇梭，當涉及做原生增強時使用RN的API構(gòu)建一些原生的模塊并暴露出來給RN調(diào)用笆制。
- 原生包RN氮墨。應用入口由原生代碼控制，頁面跳轉(zhuǎn)邏輯由原生主導栗弟。某些跨平臺業(yè)務邏輯頁面由RN開發(fā)污筷。充分利用RN的跨平臺特性，較少原生開發(fā)的巨大成本乍赫。
當采用第二種方式時就需要在原生應用中嵌入RN頁面“曛現(xiàn)在就手把手的教大家如何操作。為方便大家理解耿焊，我們從一個全新創(chuàng)建的Objective C項目出發(fā)揪惦。
第一步，創(chuàng)建一個OC原生項目罗侯。
在XCode中快速地創(chuàng)建一個OC single view 項目器腋。
第二步，添加RN需要的npm依賴項目钩杰。
和其他js項目一樣纫塌，添加RN的npm 依賴首先需要在項目的根目錄下創(chuàng)建一個package.json文件。二話不說讲弄，直接在項目根目錄下新建package.json,然后拷入以下代碼:
{
"name": "EmbedRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "~15.4.0-rc.4",
"react-native": "0.38.0"
},
"devDependencies": {
"babel-jest": "21.0.0",
"babel-preset-react-native": "3.0.2",
"jest": "21.0.1",
"jest-react-native": "18.0.0",
"prop-types": "^15.5.10",
"react-test-renderer": "~15.4.0-rc.4"
},
"jest": {
"preset": "react-native"
}
}
React和RN的版本根據(jù)自己的需要進行設定措左，但要注意二者版本匹配。如果不確定可以自己先react-native init一個項目看一下版本號避除。
接下來怎披，熟悉得不能再熟悉的動作了: npm install。
安裝完成后我們在項目的根目錄下就多了一個子目錄node_modules/瓶摆。親切吧凉逛。
第三步，安裝cocopod依賴項群井。
使用cocodpod可以快速幫助我們添加React Native依賴項到原生項目里去状飞。首先在項目根目錄下新建Podfile（通過執(zhí)行pod init），這是cocopod的依賴項目錄书斜。
拷入以下內(nèi)容：
target 'EmbedRN' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同诬辈，那你就要根據(jù)實際路徑修改下面的`:path`
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
end
依賴的庫名是React, 根據(jù)項目的需要添加不同的subspecs進來。如要使用Text那么加進來RCTText, Image就加RCTImage等等荐吉”涸悖可用的subspecs列表可以查閱node_modules/react-native/React.podspec文件。
好了样屠，有了node_modules和Podfile,接下來運行命令:
pod install
Pod項目依賴安裝成功酬荞。關(guān)閉當前xcode session搓劫，從此以后我們就使用.xcworkspace來打開我們的項目了。
第四步混巧，編寫RN頁面
新建RN入口頁面：index.ios.js。至于這里的文件名是否一定必須是index.ios.js勤揩，回答是否定的咧党。你可以使用任意的文件名，只要后面在oc代碼中指定同樣的文件名就可以了陨亡。
比如你想使用business2.js做文件名傍衡，沒問題，在后面的oc代碼中指定好jsCodeLocation地址就可以了负蠕。這樣就可以保證原生應用按照不同的業(yè)務場景嵌入不同的RN頁面蛙埂。
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
} from 'react-native';
export default class Page1 extends Component {
render() {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'}}>
<Text>
Welcome to React Native!
</Text>
<Text>
To get started, edit index.ios.js
</Text>
<Text>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('Page1', () => Page1);
第五步，原生頁面調(diào)用RN頁面
在ViewController.m中添加如圖代碼遮糖。 RCTRootView就是終極大法了绣的。
第六步，運行
首先打開RN的package server:
npm start -- --reset-cache
然后xcode中運行項目欲账。
大功告成屡江。
