(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 应用程序
有两块你需要设置:
- 根 JavaScript 文件,该文件将包含实际的 React Native 应用程序和其他组件
- 包装 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
。
但是,为了使代码简洁,让我们把 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 启动 RCTRootView
。index.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
内部运行。
Live 也从模拟器重新加载工作!你已经得到了一个简单的完全封装在 Objective–C UIView
子类中的 React 组件。
(2)通过项目应用的方式集成
(1)将react native 整个文件夹copy到项目的目录文件中
(2)将需要使用的库一个一个添加引用,库都在react-native/Libraries目录中
(3)不过这个方式的编译还是有点问题,index.os.js都不能完全脱离开,不知道哪有react-native自己搭建的后台
react native与现有的应用程序集成的更多相关文章
-
[RN] React Native代码转换成微信小程序代码的转换引擎工具
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
-
React Native 在现有项目中的探路
移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...
-
iOS 集成React Native到现有iOS应用(Ficow本人实测,Xcode 8.3,iOS 10.3)
详细操作步骤,请 参考官方文档 或者翻译文档 ! 我补充一些必要的注意事项: 1.引入React.a文件.配置User Header Search Paths 引入React.a文件(点击+可以看到 ...
-
React Native实践之携程Moles框架
编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...
-
React Native之携程Moles框架
因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...
-
React Native 手工搭建环境 之iOS篇
常识 React native 开发服务器 在开发时,我们的框架是这样的:  当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内.这时,已经不再需要开发服 ...
-
React Native 架构演进
写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...
-
如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
-
React Native之通知栏消息提示(android)
React Native之通知栏消息提示(android) 一,需求分析与概述 1.1,推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用 ...
随机推荐
-
Xcode 8 Simulator Stop Logging too much info
按照以下内容设置即可:
-
hsql数据库使用详解(入门)及快速使用
一.简介: hsql数据库是一款纯Java编写的免费数据库,许可是BSD-style的协议,如果你是使用Java编程的话,不凡考虑一下使用它,相对其 他数据库来说,其体积小,才563kb.仅一个hsq ...
-
Spark中shuffle的触发和调度
Spark中的shuffle是在干嘛? Shuffle在Spark中即是把父RDD中的KV对按照Key重新分区,从而得到一个新的RDD.也就是说原本同属于父RDD同一个分区的数据需要进入到子RDD的不 ...
-
PHP奇趣笔试试题一则
$a = 3; $b = 5; if($a = 5 || $b = 7){ $a++; $b++; } echo $a, ' ', $b; 输出结果为: A.6 8 B.6 6 C.2 6 D.1 6 ...
-
AS3.0中用于网络通信的类总结
0条评论 1.Loader Loader 类可用于加载 SWF 文件或图像(JPG.PNG 或 GIF)文件.也只能是这些对象. 网络协议基础:HTTP/RTMP 加载方法原型:Loader.l ...
-
java中list的使用方法
LIST是个容器接口,可以理解为动态数组,传统数组必须定义好数组的个数才可以使用,而容器对象无须定义好数组下标总数, 用add()方法即可添加新的成员对象,他可以添加的仅仅只能为对象,不能添加基本数据 ...
-
从头开始基于Maven搭建SpringMVC+Mybatis项目(4)
接上文内容,上一节中的示例中完成了支持分页的商品列表查询功能,不过我们的目标是打造一个商品管理后台,本节中还需要补充添加.修改.删除商品的功能,这些功能依靠Mybatis操作数据库,并通过Spring ...
-
ambari2.6.1汉化记录
1.1测试机 Apache hadoop2.6Apache ambari 2.6.1集群规模:单节点操作系统 CentOS7以下所有操作均在root用户下执行 1.2安装环境 安装Maventar - ...
-
自学工业控制网络之路1.6-典型的现场总线介绍Interbus
返回 自学工业控制网络之路 自学工业控制网络之路1.6-典型的现场总线介绍Interbus 1987年正式公布,其主要技术开发者为德国的PhoenixContact公司.1996年,INTERBUS成 ...
-
Head First Servlets &; JSP 学习笔记 第二章 —— Web应用体系结构
Servlet没有main()方法,所以Servlet受其他人控制,这个其他人就是容器!而Tomcat就是一种容器. 容器向Servlet提供Http请求和Http响应:容器来调用Servlet的do ...