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

需求

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

通過CocoaPods安裝React Native

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

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

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

記得要添加所有你需要的依賴。舉例來說，<Text>元素如果不添加RCTText依賴就不能運行。

接著安裝你的pods：

$ pod install

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

有兩個地方需要準備：

入口JavaScript文件必須要包含你實際的React Native應用和其他的組件。

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

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

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

然后復制并粘貼一個index.ios.js的初始代碼——這是一個簡單的React Native應用：

'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就是你的模塊名，這個在后面會要用到。

往應用里添加容器視圖

你需要添加一個容器視圖來容納React Native組件。它可以是你應用里任何的UIView。

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

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

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

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

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

往容器視圖里添加RCTRootView

準備好開始最有意思的部分了嗎？現(xiàn)在我們要創(chuàng)建RCTRootView來包含你的React Native應用。

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

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;

啟動開發(fā)服務器。

譯注：這一部分的官方文檔都有一些過時。翻譯組在翻譯&審校完其它部分的文檔后，如果官方文檔還沒有更新，會幫助校正官方文檔的同時翻譯中文文檔。

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

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

這條命令會啟動一個React Native開發(fā)服務器，用于構(gòu)建我們的bundle文件。--root選項用來標明你的React Native應用所在的根目錄。在我們這里是ReactComponents目錄，里面有一個index.ios.js文件。開發(fā)服務器啟動后會打包出index.ios.bundle文件來，并可以通過http://localhost:8081/index.ios.bundle來訪問。

編譯和運行

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

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

總結(jié)

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

你可以在這里獲得一個樣例應用的完整源代碼。

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

總結(jié)

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

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