由于React并沒(méi)有假設(shè)你其余部分的技術(shù)棧——它通常只作為MVC模型中的V存在——它也很容易嵌入到一個(gè)并非由React Native開(kāi)發(fā)的應(yīng)用當(dāng)中。實(shí)際上，它可以和常見(jiàn)的許多工具結(jié)合，譬如CocoaPods。

需求

• CocoaPods?–?gem install cocoapods
• Node.js
  • 安裝?nvm（安裝向?qū)г谶@里）。然后運(yùn)行nvm install node && nvm alias default node，這將會(huì)默認(rèn)安裝最新版本的Node.js并且設(shè)置好命令行的環(huán)境變量，這樣你可以輸入node命令來(lái)啟動(dòng)Node.js環(huán)境。nvm使你可以可以同時(shí)安裝多個(gè)版本的Node.js，并且在這些版本之間輕松切換。
• 在你JS代碼文件所在目錄下，安裝React Native依賴：npm install react-native --save

通過(guò)CocoaPods安裝React Native

CocoaPods是iOS/Mac開(kāi)發(fā)最常用的包管理工具。我們需要用它來(lái)引入React Native。如果你還沒(méi)安裝過(guò)CocoaPods，參考這篇文章。

當(dāng)你準(zhǔn)備好開(kāi)始使用CocoaPods之后，往Podfile中增加以下的內(nèi)容。如果你還沒(méi)有這個(gè)文件，在你工程的根目錄下創(chuàng)建一個(gè)。

# 取決于你的工程如何組織，你的node_modules文件夾可能會(huì)在別的地方。 # 請(qǐng)將:path后面的內(nèi)容修改為正確的路徑。 pod 'React', :path => './node_modules/react-native', :subspecs => ['Core','RCTImage','RCTNetwork','RCTText','RCTWebSocket',# 添加其他你想在工程中使用的依賴。 ]

記得要添加所有你需要的依賴。舉例來(lái)說(shuō)，<Text>元素如果不添加RCTText依賴就不能運(yùn)行。

接著安裝你的pods：

$ pod install

創(chuàng)建你的React Native應(yīng)用

有兩個(gè)地方需要準(zhǔn)備：

入口JavaScript文件必須要包含你實(shí)際的React Native應(yīng)用和其他的組件。

封裝Objective-C代碼，加載你的腳本并創(chuàng)建一個(gè)RCTRootView來(lái)顯示和管理你的React Native組件。

首先，創(chuàng)建一個(gè)文件夾來(lái)保存你的React代碼，然后創(chuàng)建一個(gè)index.ios.js文件。

$ mkdir ReactComponent $ touch ReactComponent/index.ios.js

然后復(fù)制并粘貼一個(gè)index.ios.js的初始代碼——這是一個(gè)簡(jiǎn)單的React Native應(yīng)用：

'use strict';var React = require('react-native'); var {Text,View } = React;var styles = React.StyleSheet.create({container: {flex: 1,backgroundColor: 'red'} });class SimpleApp extends React.Component {render() {return (<View style={styles.container}><Text>This is a simple application.</Text></View>)} }React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp就是你的模塊名，這個(gè)在后面會(huì)要用到。

往應(yīng)用里添加容器視圖

你需要添加一個(gè)容器視圖來(lái)容納React Native組件。它可以是你應(yīng)用里任何的UIView。

不過(guò)，為了讓代碼更整潔，我們可以派生一個(gè)UIView，取名ReactView。打開(kāi)你的Yourproject.xcworkspace來(lái)創(chuàng)建一個(gè)新的ReactView類(lèi)（你也可以取任何你想要的名字！）

// ReactView.h#import <UIKit/UIKit.h> @interface ReactView : UIView @end

在想要管理這個(gè)視圖的視圖管理器中，添加一個(gè)outlet然后連接它：

// ViewController.m@interface ViewController () @property (weak, nonatomic) IBOutlet ReactView *reactView; @end

這里我出于簡(jiǎn)化目的禁用了AutoLayout。在實(shí)際生產(chǎn)環(huán)境中，通常你都應(yīng)該打開(kāi)AutoLayout并且設(shè)置相應(yīng)的約束。

往容器視圖里添加RCTRootView

準(zhǔn)備好開(kāi)始最有意思的部分了嗎？現(xiàn)在我們要?jiǎng)?chuàng)建RCTRootView來(lái)包含你的React Native應(yīng)用。

在ReactView.m中，我們需要先使用你的index.ios.bundle的URI來(lái)初始化RCTRootView。index.ios.bundle會(huì)由packager服務(wù)創(chuàng)建，可以通過(guò)React Native服務(wù)器訪問(wèn)到。我們會(huì)在后面討論這個(gè)問(wèn)題。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; // For production use, this `NSURL` could instead point to a pre-bundled file on disk: // // NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; // // generated by "Bundle React Native code and images" build step. // // curl http://localhost:8081/index.ios.bundle -o main.jsbundle RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocationmoduleName: @"SimpleApp"launchOptions:nil];

然后把它添加為ReactView的子視圖。

[self addSubview:rootView]; rootView.frame = self.bounds;

啟動(dòng)開(kāi)發(fā)服務(wù)器。

譯注：這一部分的官方文檔都有一些過(guò)時(shí)。翻譯組在翻譯&審校完其它部分的文檔后，如果官方文檔還沒(méi)有更新，會(huì)幫助校正官方文檔的同時(shí)翻譯中文文檔。

在工程的根目錄下，我們可以開(kāi)啟React Native開(kāi)發(fā)服務(wù)器：

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

這條命令會(huì)啟動(dòng)一個(gè)React Native開(kāi)發(fā)服務(wù)器，用于構(gòu)建我們的bundle文件。--root選項(xiàng)用來(lái)標(biāo)明你的React Native應(yīng)用所在的根目錄。在我們這里是ReactComponents目錄，里面有一個(gè)index.ios.js文件。開(kāi)發(fā)服務(wù)器啟動(dòng)后會(huì)打包出index.ios.bundle文件來(lái)，并可以通過(guò)http://localhost:8081/index.ios.bundle來(lái)訪問(wèn)。

編譯和運(yùn)行

現(xiàn)在編譯和運(yùn)行你的應(yīng)用。你應(yīng)該可以看到你的React Native應(yīng)用在ReactView內(nèi)運(yùn)行。

在模擬器下也可以實(shí)現(xiàn)熱加載（需要在Build Settings -> Preprocessor Macros中設(shè)置DEBUG=1）。現(xiàn)在你已經(jīng)擁有了一個(gè)React組件，它在Objective-C中完全表現(xiàn)為一個(gè)UIView的子類(lèi)。

總結(jié)

在底層，當(dāng)RCTRootView初始化完成以后，它會(huì)嘗試從開(kāi)發(fā)服務(wù)器下載、解析并運(yùn)行打包后的腳本文件。所以你所要做的就是實(shí)現(xiàn)你自己的容器視圖或者視圖控制器，然后把RCTRootView作為子視圖加入——接下來(lái)RCTRootView會(huì)搞定你的腳本文件然后渲染你的React組件。太棒了！

你可以在這里獲得一個(gè)樣例應(yīng)用的完整源代碼。

本文轉(zhuǎn)自React Native中文網(wǎng)：http://reactnative.cn/docs/0.20/embedded-app-ios.html#content

總結(jié)

以上是生活随笔為你收集整理的React Native使用指南-植入原生应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。