React Native使用指南-植入原生应用
由于React并没有假设你其余部分的技术栈——它通常只作为MVC
模型中的V
存在——它也很容易嵌入到一个并非由React Native开发的应用当中。实际上,它可以和常见的许多工具结合,譬如CocoaPods。
需求
- CocoaPods –
gem install cocoapods
- Node.js
- 安装 nvm(安装向导在这里)。然后运行
nvm install node && nvm alias default node
,这将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node
命令来启动Node.js环境。nvm使你可以可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。
- 安装 nvm(安装向导在这里)。然后运行
- 在你JS代码文件所在目录下,安装React Native依赖:
npm install react-native --save
通过CocoaPods安装React Native
CocoaPods是iOS/Mac开发最常用的包管理工具。我们需要用它来引入React Native。如果你还没安装过CocoaPods,参考这篇文章。
当你准备好开始使用CocoaPods之后,往Podfile
中增加以下的内容。如果你还没有这个文件,在你工程的根目录下创建一个。
# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => ['Core','RCTImage','RCTNetwork','RCTText','RCTWebSocket',# 添加其他你想在工程中使用的依赖。
]
记得要添加所有你需要的依赖。举例来说,<Text>
元素如果不添加RCTText
依赖就不能运行。
$ pod install
创建你的React Native应用
- 入口JavaScript文件必须要包含你实际的React Native应用和其他的组件。
- 封装Objective-C代码,加载你的脚本并创建一个
RCTRootView
来显示和管理你的React Native组件。
首先,创建一个文件夹来保存你的React代码,然后创建一个index.ios.js
文件。
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
然后复制并粘贴一个index.ios.js
的初始代码——这是一个简单的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
在想要管理这个视图的视图管理器中,添加一个outlet然后连接它:
// ViewController.m@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end
这里我出于简化目的禁用了AutoLayout。在实际生产环境中,通常你都应该打开AutoLayout并且设置相应的约束。
往容器视图里添加RCTRootView
准备好开始最有意思的部分了吗?现在我们要创建RCTRootView
来包含你的React Native应用。
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// generated by "Bundle React Native code and images" build step.
//
// curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocationmoduleName: @"SimpleApp"launchOptions:nil];
[selfaddSubview:rootView];rootView.frame = self.bounds;
启动开发服务器。
译注:这一部分的官方文档都有一些过时。翻译组在翻译&审校完其它部分的文档后,如果官方文档还没有更新,会帮助校正官方文档的同时翻译中文文档。
在工程的根目录下,我们可以开启React Native开发服务器:
(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)
编译和运行
现在编译和运行你的应用。你应该可以看到你的React Native应用在ReactView
内运行。
总结
本文转自React Native中文网:http://reactnative.cn/docs/0.20/embedded-app-ios.html#content
React Native使用指南-植入原生应用相关推荐
- React Native开发指南-在原生和React Native间通信
通过植入原生应用和原生UI组件两篇文档,我们学习了React Native和原生组件的互相整合.在整合的过程中,我们会需要在两个世界间互相通信.有些方法已经在其他的指南中提到了,这篇文章总结了所有可行 ...
- React Native使用指南-原生模块
有时候App需要访问平台API,但React Native可能还没有相应的模块封装:或者你需要复用Objective-C.Swift或C++代码,而不是用JavaScript重新实现一遍:又或者你需要 ...
- React Native – 使用 JavaScript 开发原生应用
前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目.不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 ...
- React Native使用指南-原生UI组件
在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如Scr ...
- React Native使用指南-使用链接库
并不是所有的APP都需要使用全部的原生功能,包含支持全部特性的代码会增大应用的体积.但我们仍然希望能让你简单地根据自己的需求添加需要的特性. 在这种思想下,我们把许多特性都发布成为互不相关的静态库. ...
- React Native 中的 Android 原生模块
当使用 React Native 开发 Android 应用时,你可能需要使用没有被 React Native 封装的模块.但你可以使用 Java 编写原生模块,然后选择性的暴露公共接口到 React ...
- React Native学习指南
本篇汇集了React从入门到精通的各种技术,是你学习RN的指南 . 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! ...
- React Native使用指南-在设备上运行
注意在iOS设备上运行React Native应用需要一个Apple Developer account并且把你的设备注册为测试设备.本向导只包含React Native相关的主题. 译注:从XCod ...
- React Native 版本升级指南
前言 React Native 作为一款跨端框架,有一个最让人头疼的问题,那就是版本更新.尤其是遇到大版本更新,JavaScript.iOS 和 Android 三端的配置构建文件都有非常大的变动,有 ...
最新文章
- 20CSS中的高级技巧
- java 显式锁_Java 实现一个自己的显式锁Lock(有超时功能)
- 未分配内存的指针导致段错误
- PMP考试资料:这个项目值得去做吗
- SQLServer存储过程的返回值 查询分析器/程序
- Fedora19 搭建LAMP环境
- 关于xcode7编译旧项目崩溃-[UIApplication _runWithMainScene:transitionContext:completion:]
- Lintcode--1(463)--整数排序
- W3C近期要闻:与Mozilla MDN合作联合开发Web平台文档
- GDAL读写矢量文件——Java
- Path Sum Path Sum II
- atitit 编程语言概念与原理
- c++整人小程序(附源码)
- PTF 安装及简单测试 Packet Testing Framework
- AutoCAD Civil 3D中的对象和标签
- time_expire时间过短,刷卡至少1分钟,其他5分钟
- QGridLayout(表格布局)详细使用说明
- 20150317 实习之——余世维视频(上)
- 倒计时1天!亮点抢先看,2022京东云产业融合新品发布会
- 哪里有什么类似几何画板的软件?