react native与现有的应用程序集成

(1)通过cocopods 集成 ,以下内容
参考 http://wiki.jikexueyuan.com/project/react-native/integration-existing.html

     

鉴于 React
并从未做出关于你任何的技巧堆栈的只要——平时在 MVC 中概括的用 V 来代表——这很容易嵌入到现有
non-React Native
应用程序中。事实上,它与其它的一流实践社区工具集成了,如 CocoaPods

需求

用 CocoaPods 安装 React Native

CocoaPods 是 iOS/Mac
开发的军事管制工具包。我们需要用它来下载 React Native。如若您还并未设置
CocoaPods,请查看本教程

当您准备选取 CocoaPods
工作时,添加以下行到 Podfile 中。假若你未曾,那么在您的项目标根目录下开创它。

    pod 'React'
    pod 'React/RCTText'
    # Add any subspecs you want to use in your project

回忆安装具有你需要的
subspecs。没有 pod 'React/RCTText'<Text> 元素不可能采纳。

接下来安装你的 pods:

$ pod install

始建你的 React Native 应用程序

有两块你需要安装:

  1. 根 JavaScript 文件,该文件将富含实际的 React Native
    应用程序和其他零件
  2. 打包 Objective – C
    代码,将加载脚本并创造一个 RCTRootView 来显示和管制你的 React
    Native 组件

首先,为您的应用程序的 React
代码创制一个索引,并创办一个简练的 index.ios.js 文件:

$ mkdir ReactComponent
$ touch index.ios.js

为 index.ios.js 复制 & 粘贴以下 starter 代码——它是一个 barebones 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

图片 1

只是,为了使代码简洁,让我们把 UIView 归入子类。让大家把它取名为 ReactView。打开你的Yourproject.xcworkspace,并创办一个新类 ReactView(你可以把它命名为其他你喜爱的名字:))。

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

在一个视图控制器中,想要管理这一视图,继续充分一个说话并将其总是:

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

在此间我概括的剥夺了 AutoLayout。在实际上产品中,你应有自己打开
AutoLayout,并且安装约束。

为容器视图添加 RCTRootView

预备好读书最有意思的这有的了吧?现在我们将在你的 React Native
应用程序存在的职务成立 RCTRootView

在 ReactView.m 中,我们率先需要用 index.ios.bundle 的 URI
启动 RCTRootViewindex.ios.bundle 将被 packager 创制,并由 React
Native 服务器服务,这将在稍后研讨。

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: @"SimpleApp"
                                                 launchOptions:nil];

下一场把它看作 ReactView 的子视图添加。

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

启航开发服务器

在根目录,我们需要启动 React Native 开发服务器。

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

本条命令将在我们的 CocoaPods 倚重中启动一个 React Native
开发服务器,来创立捆绑脚本。——root 选项注明 React Native
应用程序的根——这将是我们包含单一 index.ios.js 文件的 ReactComponents目录。该运行的服务器将透过 http:/ / localhost:8081 / index.ios.bundle 把 index.ios.bundle 打包成可访问的文件。

编译和运行

今昔编译并运行你的应用程序。你将见到你的 React Native
应用程序在 ReactView 内部运转。

图片 2

Live 也从模拟器重新加载工作!你已经拿到了一个简单的完全封装在
Objective–C UIView 子类中的 React 组件。

(2)通过项目应用的主意集成

    (1)将react native 整个文件夹copy到花色的目录文件中

   
(2)将急需选拔的库一个一个增长引用,库都在react-native/Libraries目录中

   
(3)但是那一个办法的编译依旧多少问题,index.os.js都不可能一心剥离开,不知底哪有react-native自己搭建的后台