React Native 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
React Native 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
React Native 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织 Facebook
地区 不详
投 递 者 _icode
适用人群 未知
收录时间 2015-03-23

软件简介

React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。

在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。

UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。

更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处:

  1. 手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。

  2. 原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。

  3. 样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

原生 iOS 组件:

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

触摸事件处理:

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

布局:

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.image}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native
          </Text>
          <Text style={styles.subtitle}>
            Build high quality mobile apps using React
          </Text>
        </View>
      </View>
    );
  },
});
var styles = StyleSheet.create({
  row: { flexDirection: 'row', margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center'},
  title: { fontSize: 11, fontWeight: 'bold' },
  subtitle: { fontSize: 10 },
});

扩展:

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule
- (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
  RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  render: function() {
    getInitialState() {
      return { text: 'Goodbye World.' };
    },
    componentDidMount() {
      NativeModules.MyCustomModule.processString(this.state.text, (text) => {
        this.setState({text});
      });
    },
    return (
      <Text>{this.state.text}</Text>
    );
  },
});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(34)
发表了资讯
09/18 07:34

React Native 0.70.1 发布

React Native 0.70.1 现已发布,具体更新内容如下: Added 为 HermesExecutorFactory 添加更多调试设置 为 turbo 模块支持 TypeScript 数组类型(仅限组件) Changed 接受 TypeScript 类型T | null | undefined作为 turbo 模块中 T 的可能类型 将 react-native-gradle-plugin 升级到 0.70.3 将 react-native-codegen 升级到 0.70.5 Hermes 版本升级 Fixed 修复 hermes profiler Android specific 在 borderColor 中支持 Platfo...

0
0
发表了资讯
09/06 07:47

React Native 0.70 发布,Hermes 成为默认引擎

React Native 0.70 版本正式发布,这个版本有几项改进,比如 Codegen 的新的统一配置、Hermes 作为默认引擎、对 Android 构建的完整 CMake 支持,还有对新架构文档的更新。 具体更新内容如下: New Architecture 的新文档 在过去的几个月里,Meta 一直在努力为文档中的 New Architecture 部分增加更多的内容。在新的部分,你可以找到迁移指南、例子和教程,让你尽快掌握。 同时你还可以找到新的文档,深入了解为什么要有一个 Ne...

1
5
发表了资讯
07/23 07:35

React Native 0.69.2 发布,使用 React 编写原生应用

React Native 0.69.2 现已发布,具体更新内容如下: Changed 为 react v18 compat 设置 react-shallow-renderer v16.15.0 (a39a7c453d) 将 RN CLI 升级到 v8.0.3(28cbd21d21) iOS specific Hermes pod:更改逻辑以使用 hermes 标签正确设置 pod 源(46a9edc854) 修复在 new Blob(blob) 后调用 readAsDataURL 时的 race condition (bd12e41188) 确保在创建发布版本时不安装 Flipper pod(23accbf58d) 详情可查看:https://g...

0
0
发表了资讯
06/30 07:01

React Native 0.69.1 已发布

React Native 0.69.1 现已发布,具体更新内容如下: 变更 针对 iOS 公开所有 Yoga 标题并添加 #ifdef __cplusplus (43f831b23c) Fixed 对 performance.now() 使用单调时钟 (114d31feee) 针对 iOS 修复 React-RCTText 的构建( (4ea38e16bf by @ph4r05) 修复 RCT-Folly 的构建错误 (use_frameworks! 和 hermes 均已修复) (79baca678a) 修复 0.69 版本的 use_frameworks! (f97c6a5b49 ) 更新公告:https://github.com/facebook...

0
0
发表了资讯
06/24 07:17

React Native 0.69 发布,首个支持 React 18 的版本

React Native 0.69 已发布。此版本对新架构和新特性进行了多项改进,其中包括支持 React 18,以及与 Hermes 绑定发布。 React 18 React Native 0.69 是第一个支持 React 18 的版本。React 18 带来了许多改进,比如新 hookuseId,以及新的并发特性:useTransition和完整的 Suspense 支持。 React Native 0.69 已默认启用 React 18。但如果开发者尚未迁移到新架构,则无法使用并发渲染和其他并发特性。开发团队表示无法为旧架构添...

1
0
发表了资讯
04/15 07:05

React Native 0.68.1 发布,使用 React 编写原生应用

React Native 0.68.1 现已发布,具体更新内容如下: Changed Android specific 将 React Native Gradle 插件升级到 0.0.6 codegen tasks 不需要 yarn Fixed 通过将 key function 添加到 ShadowNodeWrapper 和相关类来修复 dynamic_cast(RTTI) 将 use-subscription 改为 < 1.6.0 Android specific 仅对 Windows 用户使用 NDK 23 改进对 M1 机器上 Android 用户的支持 Template:如果未设置 enableSeparateBuildPerCPUArchitect...

0
1
发表了资讯
02/02 07:41

React Native 0.67.2 发布,使用 React 编写原生应用

React Native 0.67.2 现已发布,具体更新内容如下: Fixed 修复错误“mockModal is not a function”(507b05f4c0) Android specific 修复了 ReactRootView 没有附加 insets 时的潜在崩溃。(6239e2f5ce) 将 OkHttp 从 4.9.1 升级到 4.9.2 以修复 CVE-2021-0341。(e896d21) iOS specific 修复运行pod install --project-directory=ios时未应用Time.h补丁的问题(60cef850bd) Find-node.sh 现在 respects .nvmrc (35bcf934b...

1
1
2021/08/19 06:34

React Native 0.65 发布

React Native 0.65 已经发布了,此版本主要亮点包括: Hermes 0.8.1。 react-native-codegen 0.0.7 版现在需要作为 package.json 中的 devDependency。 JCenter 现已弃用且为只读。官方已将 JCenter 作为 maven 仓库移除并更新了依赖项以使用 MavenCentral 和 Jitpack。 将 OkHttp 从 v3 升级到 v4.9.1。有关更改的更多详细信息,可参阅 Upgrading to OkHttp 4。 升级到 Flipper 0.93 以支持 Xcode 12.5。可参阅此处的 Flipper ...

3
2
2021/03/14 07:34

React Native 0.64 发布,iOS 上 Hermes 支持

React Native 0.64 已经发布了,此版本主要亮点包括: 在 iOS 上加入 Hermes 默认情况下启用 Inline Requires React 17 Hermes opt-in on iOS 在此版本中,用户可以使用 Hermes 在 iOS 上进行构建。要在 iOS 上启用 Hermes,可在你的 Podfile 中设置 hermes_enabled 为 true,然后运行 pod 安装。 use_react_native!( :path => config[:reactNativePath], # to enable hermes on iOS, change `false` to `true` and ...

2
1
发表于大前端专区
2020/07/09 08:25

React Native 0.63 发布,告警系统、颜色与交互能力改进

React Native 0.63 已经发布了,此版本主要亮点包括: 默认启用 LogBox <Pressable /> 组件 新增使用系统定义颜色的 API 默认启用 LogBox 社区一直以来反馈错误和警告很难在 React Native 中进行调试,因此开发团队研究了 React Native 中的整个错误、警告和日志系统,从头开始对其进行了重新设计,现在使用一个新系统 LogBox 替换 redbox、yellowbox 与日志记录。上一个版本中已经引入该 LogBox,此版本开始,它默认开启,并在...

8
8
发表于大前端专区
2020/04/07 07:38

React Native 0.62 发布,默认支持 Flipper,新的暗黑模式

React Native 0.62 发布了,此版本一大亮点是默认支持 Flipper。 Flipper 是用于调试移动应用的开发人员工具,它在 Android 和 iOS 社区中都很流行,Flipper 提供以下功能: Metro Actions:重新加载应用并从工具栏直接触发开发菜单。 Crash Reporter:查看来自 Android 和 iOS 设备的崩溃报告。 React DevTools:与所有其它工具一起使用最新版本的 React DevTools。 Network Inspector:查看设备应用程序发出的所有网络请求。 ...

0
4
发表于大前端专区
2019/09/26 06:57

React Native 0.61.0 发布,使用 React 编写原生应用

React Native 0.61.0 发布了,这是一个稳定版本,此版本带来的一些主要变化如下: 全新的热加载体验,称为“快速刷新”(Fast refresh)。它是默认开启的,可以在开发人员菜单下访问。敬请期待在即将发布的博客文章中有关此功能的更多详细信息。 React 版本已更新至 16.9 - 0ccedf3 通过 use_frameworks 更好地支持 CocoaPods 更新说明及下载地址...

7
4
发表于大前端专区
2019/08/15 07:05

React Native 0.60.5 发布,使用 React 编写原生应用

React Native 0.60.5 发布了,这是一个补丁版本,更新内容如下: 新增 为新项目添加了默认的 Prettier 配置 (f4d5e8c by @jpdriver) Android 将 showSoftInputOnFocus 添加到 TextInput (b476ca0) 变动 CLI 更新至 ^2.6.0 (72473c7 by @thymikee) 修复 确保使用正确版本的 Metro bundler(0.54.1) (1bb197a by @kelset) Android 在发布版本中修复 Android 中的 ClassNotFound 异常 (ffdf3f2 by @thecodrr) 运行 JS 服务器时删除...

3
5
发表于大前端专区
2019/07/26 07:36

React Native 0.60.4 发布,修复新 JS 引擎相关问题

React Native 0.60.4 发布了,此版本修复了两个与 Hermes 相关的 bug: 修复未启用 Hermes 时的源映射 生成 assets/ 之外的源映射 Hermes 是 React Native 0.60.2 版本引入的一个小巧轻便的 JavaScript 引擎,针对在 Android 上运行 React Native 进行了优化。对于许多应用程序,只需启用 Hermes 即可缩短启动时间、减少内存使用量并缩小应用程序大小,此外因为它采用 JavaScript 标准实现,所以很容易在 React Native 应用中集...

1
4
发表于大前端专区
2019/07/13 07:34

React Native 0.60.2 发布,带来全新 JS 引擎 Hermes

React Native 0.60.2 发布了,此版本带来了 Chain React Conf 2019 上宣布的 Hermes JavaScript 引擎。 Hermes 是一款小巧轻便的 JavaScript 引擎,针对在 Android 上运行 React Native 进行了优化。对于许多应用程序,只需启用 Hermes 即可缩短启动时间、减少内存使用量并缩小应用程序大小,此外因为它采用 JavaScript 标准实现,所以很容易在 React Native 应用中集成。 目前 Hermes 是一个可选的 React Native 功能,具体启用...

3
7
发表于大前端专区
2019/07/05 07:13

React Native 0.60.0 发布,使用 React 编写原生应用

React Native 0.60.0 稳定版发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 默认 CocoaPods 集成 自动链接包 可以在更改日志中找到完整的更改列表。 更新说明及下载地址

3
2
发表于大前端专区
2019/06/11 06:59

React Native 0.60.0 RC1 发布,支持 AndroidX

React Native 0.60.0 的第一个候选版本发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 视图能够嵌套在 Text 组件中 默认 CocoaPods 集成 作为 beta 支持自动链接包 一些重要的修复,比如,对于 iOS:修复 iOS 12/Xcode 10 中的通用链接问题 详情可查看完整更新列表。 更新说明及下载地址...

1
1
发表于大前端专区
2019/06/07 07:48

React Native 0.59.9 发布,使用 React 编写原生应用

React Native 0.59.9 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版本是针对几个 ScrollView 回归的补丁修复版本,更新内容如下: 改动 如果未在配置中指定 isInteraction,则它将始终默认为 true,这将阻止 VirtualizedList 更新之类的交互。如果某些内容最终干扰动画并导致帧丢失,则可以手动设置 isInteraction 更新 detox 以匹配 master 安卓端 Bump Gradle 5.4.1 & Android Gradle 插件 3....

3
1
发表于大前端专区
2019/05/10 07:24

React Native 0.59.8 发布,使用 React 编写原生应用

React Native 0.59.8 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 新增 为非值动画节点添加侦听器 默认设置 ScrollView throttle 改动 在键盘关闭时使 KeyboardAvoidingView 与 behavior="height" 调整大小 更新网络检查器以获得更智能的滚动粘性 修复 修复 hasteImpl 上的 regexp 在 EventEmitter#listeners() 中修复稀疏数组处理 修复 VirtualizedList 以立即调...

3
2
发表于大前端专区
2019/04/10 06:50

React Native 0.59.4 发布,使用 React 编写原生应用

React Native 0.59.4 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 改动 Jest transform @react-native-community 包现在是默认的 - 17292c9 iOS 端改动 将 scrollToOverflowEnabled prop 添加到 ScrollView - e3ac329 修复 修复触摸事件“长按” - 05723ed 安卓端 防止设置 underlineColorAndroid 时的一个崩溃 - d6bca97 iOS 端 修复 iOS 12 / Xcode 10 中无效的...

4
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
Yargs Y18n 输入验证错误漏洞
动态确定对象属性修改的控制不恰当
Yargs Y18n是Yargs个人开发者的一个类似I18n的由Js编写的代码库。 y18n before 3.2.2, 4.0.1 and 5.0.5版本存在输入验证错误漏洞,该漏洞源于网络系统或产品未对输入的数据进行正确的验证。
CVE-2020-7774 MPS-2020-17543
2022-08-08 18:38
minimist 输入验证错误漏洞
原型污染
minimist是一款命令行参数解析工具。 minimist 1.2.2之前版本存在输入验证错误漏洞。攻击者可借助‘constructor’和‘__proto__’ payload利用该漏洞添加或修改Object.prototype的属性。
CVE-2020-7598 MPS-2020-3516
2022-08-08 18:38
set-value 安全漏洞
使用不兼容类型访问资源(类型混淆)
set-value是一款能够使用点表示法在对象上设置嵌套值的模块。 set-value 存在安全漏洞,该漏洞源于当 path 参数中使用的用户提供的键是数组时,类型混淆漏洞可能导致绕过 CVE-2019-10747 。
CVE-2021-23440 MPS-2021-19479
2022-08-08 18:38
Async 安全漏洞
原型污染
Async是英国Caolan McMahon个人开发者的一个实用模块。用于使用异步 JavaScript。 Async 3.2.1 及之前版本存在安全漏洞,该漏洞源于 mapValues() 方法。攻击者可通过 mapValues() 方法获取权限。
CVE-2021-43138 MPS-2021-34434
2022-08-08 18:38
github ws 资源管理错误漏洞
github ws是一个应用软件。一种易于使用,运行迅速且经过全面测试的WebSocket客户端和服务器实现的方法。 漏洞版本中“Sec-Websocket-Protocol”标头的一个特殊的值可以用来显著降低ws服务器的速度,从而导致拒绝服务漏洞。
CVE-2021-32640 MPS-2021-7109
2022-08-08 18:38
mixin-deep 参数注入漏洞
参数注入或修改
mixin-deep是一款能够将对象属性混合到第一个对象中的模块。 mixin-deep 1.3.2之前版本和2.0.0版本中存在参数注入漏洞。该漏洞源于外部输入数据构造命令参数的过程中,网络系统或产品未正确过滤参数中的特殊字符。攻击者可利用该漏洞执行非法命令。
CVE-2019-10746 MPS-2019-10507
2022-08-08 18:38
set-value 资源管理错误漏洞
拒绝服务
set-value是一款能够使用点表示法在对象上设置嵌套值的模块。 set-value 3.0.1之前版本中存在资源管理错误漏洞。该漏洞源于网络系统或产品对系统资源(如内存、磁盘空间、文件等)的管理不当。
CVE-2019-10747 MPS-2019-10508
2022-08-08 18:38
npm node-fetch 安全漏洞
不加限制或调节的资源分配
node-fetch 2.6.1和3.0.0-beta版本中存在安全漏洞。该漏洞源于内容大小超过限制时,将永远不会抛出FetchError。
CVE-2020-15168 MPS-2020-12719
2022-08-08 18:38
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
34 评论
891 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部