React-Native:Integrating with Existing Apps

React-Native 教程 1 ： 集成React-Native到现有的iOS项目中

最近在学习React-Natvie，昨天刚刚集成到了已有的项目里面，记录一下填过的坑。

官方集成方式

对已有的项目，如果集成React-Native的话，最方便的形式是使用官方推荐的Cocoapods来集成。

Integrating with Existing Apps

中文翻译

1.在工程目录下新建podfile，填入以下内容

    # 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
    # 请将:path后面的内容修改为正确的路径。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
]

2.使用pod install来安装React-Native.

3.在项目目录下使用如下命令来启动服务。

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

但这样集成的话，会有一个缺点，就是在pod上的React-Native的版本还在0.13.0-rc版本，但在github上的版本已经到了0.17.0。

还有一个问题就是我们目前的工程没有使用Cocoapod。那该如何手动集成呢？

目前还发现一个问题，在官方有一个upgrading页面中写了这么一段

Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Because React Native projects are essentially made up of an Android project, an iOS project and a JavaScript project, all combined under an npm package, upgrading can be rather tricky. But we try to make it easy for you.

简单翻译一下：

时刻将React Native更新到最新的版本，可以获得更多API、视图、开发者工具以及其他一些好东西（译注：官方开发任务繁重，人手紧缺，几乎不会对旧版本提供维护支持，所以即便更新可能带来一些兼容上的变更，但建议开发者还是尽一切可能第一时间更新）。由于一个完整的React Native项目是由Android项目、iOS项目和JavaScript项目组成的，且都打包在一个npm包中，所以升级可能会有一些麻烦。我们会尽量简化这一流程。

官方也建议使用最新版本，老版本没有人手进行维护。

手动集成

花了两天的时间，找到一个手动集成React-Native的方式，虽然稍微复杂一点，但可以保持使用官方的最新版本。

1.由于目前的项目是使用的git管理的，可以将React-Native的仓库作为一个submodule添加到项目的仓库下。

git submodule add https://github.com/facebook/react-native.git

2.进入react-native目录下，切换到最新发布的版本

cd react-native
git checkout -b 017ReleaseVersion v0.17.0

3.安装组件

npm install

4.在工程目录下创建js的文件夹，并创建index.ios.js。

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

5.打开工程，添加React-Native相关工程。

添加`react-native/React/React.xcodeproj`到项目中
添加`react-native/Libraries／ActionSheetIOS/RCTActionSheet.xcodeproj`到项目中
添加`react-native/Libraries／LinkingIOS/RCTLinking.xcodeproj`到项目中
添加`react-native/Libraries／Image/RCTImage.xcodeproj`到项目中
添加`react-native/Libraries／Network/RCTNetwork.xcodeproj`到项目中
添加`react-native/Libraries／Text/RCTText.xcodeproj`到项目中
添加`react-native/Libraries／WebSocket/RCTWebSocket.xcodeproj`到项目中

6.在工程的设置页面添加需要连接到Frameworks

7.添加搜索头文件的地址。在工程的Build Settings找到Header Search Paths，添加一条$(SRCROOT)/react-native/React，选择recursive

这样就将React-Native集成到了现有的iOS工程中了。

启动服务

使用这种方式我们该如何启动服务呢？

我们先看一下Cocoapods如何启动的。

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

这里一共执行了三条命令。

  1. JS_DIR=pwd/ReactComponent找到放js的文件夹，保存到JS_DIR这个变量中。
  2. cd Pods/React 进入react目录下。
  3. npm run start -- --root $JS_DIR 将存放js文件的目录作为--root参数，然后使用npm run start启动服务。

我们主要放React的目录不同，所以只要简单修改一下第二条命令就可以了

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

添加React-Native页面

1.在iOS工程中创建ReactView类

2.在ReactView.m中#import "RCTRootView.h"

3.在- (instancetype)initWithFrame:(CGRect)frame添加如下代码NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";

NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];

RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                     moduleName:@"SimpleApp"
                                              initialProperties:nil
                                                  launchOptions:nil];

[self addSubview:rootView];

rootView.frame = self.bounds;

4.在ViewController的- (void)viewDidLoad方法中创建ReactView

ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];

[self.view addSubview:reactView];

5.我们将下面代码添加到ReactComponent\index.ios.js文件中

'use strict';

var React = require('react-native');
var {
  Text,
  View,
  Image,
} = 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);

然后我们运行一下程序。

项目在github上面，地址

Comments !

blogroll

social