React Native通過cocoaPods整合到現有工程詳解

標籤：

一、整合便利

ReactNative對外提供一個View
CocoaPods支援ReactNative

二、整合需要環境

CocoaPods - gem install cocoapods
Node.js- brew install node

三、用CocosPod安裝React

項目的根目錄下 Podfile 檔案：

platform:ios,‘7.0‘use_frameworks!target ‘kugou’ dopod ‘React‘pod ‘React/RCTText‘pod ‘React/RCTWebSocket‘end

結果：

四、工程配置

引入SDK：

User HeaderSearchPaths：

 

五、建立ReactNative頁面

根 JavaScript 檔案index.ios.js：

‘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>111122222222222 哈哈哈哈哈哈 application.</Text>      </View>    )  }}React.AppRegistry.registerComponent(‘SimpleApp‘, () => SimpleApp);

最後一行的第一個‘SimpleApp’是模組名，後面會用到

六、引入React的View

#import "RCTRootView.h”NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];        // For production use, this `NSURL` could instead point to a pre-bundled file on disk:        //        //   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];        //        // To generate that file, run the curl command and add the output to your main Xcode build target:        //        //   curl http://localhost:8081/index.ios.bundle -o main.jsbundleRCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                            moduleName: @"kugou"                                                     initialProperties:nil                                                         launchOptions:nil];[self addSubview:rootView];

七、啟動程式開發伺服器

因為是用自己的機器既做伺服器有做用戶端，所以也把程式根目錄作為服務端服務的根目錄；

終端cd進入工程根目錄，在根目錄建立目錄ReactComponent作為運行服務的執行目錄，輸入命令：(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

八、編譯和運行

Command＋R

修改js代碼，直接Command＋R就可以重新整理頁面了

九、版本發布

//OPTION 1 伺服器上載入NSURL *jsCodeLocation = [ NSURL URLWithString:@"http://localhost:8081/ index.ios.bundle?platform=ios&dev=true"]; ? //OPTION 2 本地載入 NSURL *jsCodeLocation = [[ NSBundle mainBundle] URLForResource:@“testRN" withExtension:@“jsbundle”];? ? RCTRootView *rootView = [[ RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @“AwesomeProject" initialProperties:nil launchOptions:launchOptions]; 

十、整合後的效能指標

Size: 增加0.8M
Load Time：首次載入5s

十一、小技巧

提前初始化RCTRootView
多個jsbundle共用一個RCTRootView

React Native通過cocoaPods整合到現有工程詳解