React Native通過cocoaPods集成到現有iOS工程詳解

一、集成便利

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

二、集成需要環境

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

三、用CocosPod安裝React

項目的根目錄下 Podfile 文件：

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

終端輸入命令：pod install --verbose --no-repo-update

安裝成功后，打開workspace

結果：

四、工程配置

引入SDK：

User HeaderSearch Paths：

 

五、創建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.jsbundle
RCTRootView *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