- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 与现有的应用程序集成
由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC
中简单的用 V
来表示——这很容易嵌入到现有 non-React Native 应用程序中。事实上,它与另外的最佳实践社区工具集成了,如 CocoaPods。
需求CocoaPods - gem install cocoapods
Node.js - brew install node
用 CocoaPods 安装 React Native
CocoaPods - gem install cocoapods
Node.js - brew install node
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.jsbundleRCTRootView *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 组件。
总结
所以,当 RCTRootView
初始化时,它会尝试从 React Native 开发服务器中下载,解析并运行包文件。这意味着你所需要做的就是为 RCTRootView
实现你自己的容器视图或视图控制器——RCTRootView
摄取了捆绑的 JS 并呈现出你的 React 组件。万岁!