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) 发布并加入讨论🔥
发表了资讯
02/28 16:23

React Native 0.73.5 发布

React Native 0.73.5 现已发布,具体更新内容如下: Security 将 CLI 更新到 12.3.6(ffcd8f5249) Changed Hermes bump ( 3bdd54a51c) Fixed 修复:修复 codegen 无法找到所有第三方库的问题 (67e2bb455f) 修复传递给库的 compiler flags(929df582c8) How to Test 生成一个新项目: npx react-native@next init RN0735RC1 --version 0.73.5 升级到此版本可以使用升级助手 在变更日志中查看此版本的更改 Hermes dSYMS: ...

1
2
发表了资讯
01/30 14:07

React Native 0.73.3 发布

React Native 0.73.3 现已发布,具体更新内容如下: Added iOS specific 查找 codegen 声明时处理 TSAsExpression (02957718d7) Changed 将 CLI 升级到 12.3.2(bcb229e8f8) Android specific 在 ReactActivity 的 onRequestPermissionsResult() 中调用 super.onRequestPermissionsResult ( 96ed1190c6) iOS specific 从 react_native_post_install 中移除 ATS 配置补丁(41c601e478) Fixed 声明缺少的 dependencychalk(915...

0
0
发表了资讯
01/09 10:30

React Native 0.73.2 发布

React Native 0.73.2 现已发布,具体更新内容如下: Added Unhandled promise rejection - 如果可能的话附加非标准错误对象堆栈信息(655b12dbfa) Changed 将 Metro 升级至 ^v0.80.3(16dff523b0) 重新启动应用程序时自动重新连接到现有调试器会话(0806ad7854) iOS specific 更新 ios pod post_install 逻辑以检测是否启用了 Hermes ( d6163d7f43 by @gabrieldonadel ) Fixed 修复有关在 android 模板中添加包的评论(ac9b8...

0
0
发表了资讯
2023/12/19 11:24

React Native 0.73.1 发布

React Native 0.73.1 现已发布,具体更新内容如下: Added 添加enableNetworkInspector实验,以在检查器代理中启用网络面板和 CDP 处理程序(8ef807bfb2) Changed Chore:将 CLI 升级至 12.3.0(dff11ab993) Fixed 修复 VirtualizedList 中的最后一个间隔约束逻辑 (3ed4bf9046) Android specific 修复无法识别的字段 mBinding 的类型(31d8a93bf3) iOS specific 修复了 pod 安装期间 NSAppTransportSecurity 被覆盖的问题(a...

0
0
发表了资讯
2023/12/18 11:41

React Native 0.73 稳定版

React Native 最新稳定版 0.73 已发布。此版本主要变化包括增加了对使用 Hermes 进行调试的改进、符号链接支持 (symlink) 进入稳定阶段、Android 14 支持以及新的实验性功能。此外还弃用了旧版调试功能,并发布了新架构的下一个支柱:无桥接模式 (Bridgeless Mode)。 Hermes 支持查看控制台历史 console.log()是开发者快速调试 JavaScript 代码的主流方法。在以前的版本中,在连接调试器之前,不会记录 React Native 应用程序中...

0
2
发表了资讯
2023/11/15 10:27

React Native 0.72.7 发布

React Native 0.72.7 现已发布,具体更新内容如下: Changed 将 CLI 升级到 v11.3.10 ( e844a62ce9) 将 deprecated-react-native-prop-types 升级为 ^4.2.3 ( e031c05cdc ) Fixed 在开发模式下显示未处理的承诺拒绝的正确 stack frame。(18c9797ecc) Android specific 修复将 PlatformColor 应用于 borders 时的 Android 崩溃(265af222aa) 修复 Android 上损坏的 Loading/Refreshing 指示器(5dedf277cb) 更新说明: http...

1
1
发表了资讯
2023/09/26 14:03

React Native 0.72.5 发布

React Native 0.72.5 现已发布,具体更新内容如下: Changed 将 CLI 升级到 11.3.7(6f02d55deb) 将 @react-native/codegen 升级到 0.72.7 ( 4da991407d) Fixed Android specific 修复在 Windows 上构建 Android 的问题。(054ab62be0) 在 Windows host. 上使用新的架构构建 Android 的错误修复。(a323249e0a) 修复在 Android 上使用 MaintenanceVisibleContentPosition 时发生的 null crash 问题(1a1a79871b) iOS specif...

0
0
发表了资讯
2023/08/23 14:18

React Native 0.71.13 发布

React Native 0.71.13现已发布,具体更新内容如下: Added Android specific 针对 SDK 34 - 在 DevSupportManagerBase 中添加了 RECEIVER_EXPORTED/RECEIVER_NOT_EXPORTED flag 支持(177d97d8ea) iOS specific 添加了通过 RCTBundleURLProvider 内联源映射的支持(f7219ec02d) Fixed 修复:仅当连接了 React devtools 时才挂载 devtools overlay(b3c7a5d4cc) iOS specific 修复在 iOS 上清除 multiline=true 的 TextInput ...

6
0
发表了资讯
2023/08/15 11:01

React Native 0.72.4 发布

React Native 0.72.4 现已发布,具体更新内容如下: Added Android specific 在 android API 33+ 上有 inverted FlatList 时修复 ANR 的 Native part(6d206a3f54) 针对 SDK 34 - 在 DevSupportManagerBase 中添加了 RECEIVER_EXPORTED/RECEIVER_NOT_EXPORTED 标志支持(177d97d8ea) Changed 升级 cli 和 Metro (40ea8ffcc7) 将 Hermes 升级至 hermes-2023-08-07-RNv0.72.4-813b2def12bc9df026 (e9ea926ba3) 将 CLI 升级到 11...

0
0
发表了资讯
2023/07/12 16:33

React Native 0.72.2 发布

React Native 0.72.2 现已发布,具体更新内容如下: Changed 从模板中删除已弃用的存根类型@types/metro-config(63f78ea8de) 将 CLI 升级到 11.3.5,Metro 升级到 0.76.7(ba5fa9c394) 将@react-native/metro-config升级至0.72.9(21daa6e790,f37386176) Android specific 移除 okhttp3 internal util usage(3e3032636d) iOS specific 更新逻辑以在互操作层的视图注册表中添加和删除视图。(8d2eec367d) 禁用 OSS 中的 ...

0
0
发表了资讯
2023/06/30 14:07

React Native 0.72.1 发布

React Native 0.72.1 现已发布,具体更新内容如下: Added iOS specific 添加警告以帮助用户从互操作层迁移。(a702d0515f) 允许在互操作层中查找不带 RCT 前缀的 ViewManager(a28881a3d7 ) Changed react-native/metro-config现在包括来自metro-config的所有基本配置值(bbcedd385b) 将 CLI 升级到 11.3.3(da84901f78) 将@react-native/metro-config升级至 0.72.7,@react-native/gradle-plugin升级至 0.72.11,@react-...

1
0
发表了资讯
2023/06/23 10:45

React Native 0.72 发布,支持 Symlink

React Native 0.72 近日正式发布,这个版本为 Metro 增加了备受用户期待的功能、更好的错误处理,以及其他开发者体验的改进。 新的 Metro 功能 Symlink 支持(测试版) 包导出支持(测试版) 启用测试版功能 要在项目中启用这些功能,请更新应用的 metro.config.js 文件并设置 resolver.unstable_enableSymlinks 或 resolver.unstable_enablePackageExports 选项。 新增 metro.config.js 设置 在 React Native 0.72 中,改变了R...

0
1
发表了资讯
2023/06/15 14:23

React Native 0.71.11 发布

React Native 0.71.11 现已发布,具体更新内容如下: Changed 将 CLI 升级到 10.2.4,将 Metro 升级到 0.73.10(69804c70cb) iOS specific 倾向于将捆绑响应中的Content-Locationheader 作为 JS source URL(671ea383fe) Fixed Android specific 修复了处理 keyboard events 时某些 native views 中发生的崩溃。(f7e35d4ef7) 在 runAnimationStep 中防止 OnePlus/Oppo 设备崩溃(f2c05142) 恢复“修复:边框宽度顶部/底部与...

3
0
发表了资讯
2023/04/26 07:56

React Native 0.69.10 发布

React Native 0.69.10 发布了,此版本主要旨在解决在三星设备上使用多行 TextInput 时出现的 ANR 问题。( #35936 、 #35590 ) Fixed 安卓专用 最小化 EditText 跨度 8/N:CustomStyleSpan(b384bb613b ) 最小化 EditText 跨度 6/N:letterSpacing(5791cf1f7b ) 最小化跨度 5/N:删除线和下划线(0869ea29db ) 最小化跨度 4/N:ReactForegroundColorSpan(8c9c8ba5ad ) 最小化跨度 3/N:ReactBackgroundColorSpan(cc0ba...

1
0
发表了资讯
2023/04/21 07:02

React Native 0.71.7 发布

React Native 0.71.7 现已发布,此版本主要旨在解决在三星设备上使用多行 TextInput 的 ANR 问题(#35936、#35590)。 具体更新内容如下: Fixed iOS specific 解决 Hermes 性能退步问题(9be2959) Android specific 解决了文本组件在 new arch 中丢失文本对齐状态的错误。(31a8e92cad) Mimimize EditText Spans 9/9:删除addSpansForMeasurement()(92b8981499) Mimimize EditText Spans 8/N:CustomStyleSpan(b384bb613...

3
1
发表了资讯
2023/03/31 07:20

React Native 0.71.5 发布

React Native 0.71.5 现已发布,具体更新内容如下: Changed 将 CLI 升级到 10.2.2,将 Metro 升级到 0.73.9(4c3bc24893),包含: CLI 修复:正确列出 ios 设备和模拟器(相关 PR) Metro 修复:修复 NodeWatcher 中新目录的监视内容(ab86982) Android specific 将 react-native-gradle-plugin 升级到 0.71.17(bf490d379f),包含: 修复 0.71 的 codegen 补丁(ec3681143e) iOS specific 从 0.71 中删除 ruby-version(1...

0
1
发表了资讯
2023/03/10 07:09

React Native 0.71.4 发布

React Native 0.71.4 现已发布,具体更新内容如下: Changed 使 FlatList 允许 ArrayLike 数据(c03de97fb4) 将 RNGP 提升至^0.71.16(3df4a79c3d) 将 CLI 更新到 10.2.0,将 Metro 更新到 0.73.8(20a6fbd373)- 包含: 修复:使用 Terser minification 时,Source maps 可能包含无效条目。(metro/#928) 修复:减少由于 terser#1341 引起的潜在 source map 与并发转换的不匹配问题。(metro/#929) Bump Hermes 版本 (291cc0a...

0
0
发表了资讯
2023/02/25 09:44

React Native 三大痛点:升级版本困难、调试错误不便、性能不够好

React Native 社区(非官方)在两个月前发起了一项问卷调查 (State of React Native),目的是希望进一步了解开发者使用 React Native 框架遇到的痛点,以及替代工具的选择。 近日他们公布了调查结果,总的来说,多数受访者认为 React Native 有三大痛点: 升级版本困难 调试错误不便 性能不够好 此外还有超过半数的受访者指出,React Native 框架还存在另外两个严重问题,分别是存在无人维护的软件包,以及过分依赖第三方函数库...

1
3
发表了资讯
2023/02/03 07:17

React Native 0.71.2 发布

React Native 0.71.2 现已发布,具体更新内容如下: Added 在 Alert.prompt 的类型定义中添加了 AlertOptions 参数,使其与 js 代码保持一致(305ca337c0) 添加了缺失的accessibilityLabelledByTypeScript 类型(e162b07982) 添加了缺失的accessibilityLanguageTypeScript 类型(71c4f57baf) Changed 将 core 中的 react-native-gradle-plugin 升至 ^0.71.14,将 starting template 中的 @react-native-community/eslint-con...

0
0
发表了资讯
2023/01/21 06:53

React Native 0.71.1 发布

React Native 0.71.1 现已发布,具体更新内容如下: Added Android specific 添加jsinspector到 prefab target(a80cf96fc8) iOS specific 将initialProps属性添加到RCTAppDelegate(b314e6f147) Changed 将 CLI 升级到 10.1.3(b868970037) 将 RNGP 提高到 0.71.13(416463c406) Fixed Fix(cli,metro,babel):升级 cli 和 metro 以及 babel 以修复 Windows+Metro issue (df7c92ff4c) Android specific 修复 root view 窗口...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{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 评论
893 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部