跳到主要内容

52 篇标记为“公告”的帖子

查看所有标签

React Native 开源更新 2019 年 3 月

·6 分钟阅读
Christoph Nakazawa
Christoph Nakazawa
前 Facebook 工程师

在决定加大对 React Native 开源社区的投入后,我们于 2018 年第四季度宣布了我们的 React Native 开源路线图

我们的第一个里程碑是,我们着重于识别并改进社区最显著的方面。我们的目标是减少未处理的拉取请求,缩小项目的范围,识别主要用户问题,并建立社区管理指南。

在过去的两个月中,我们取得了比预期更多的进展。阅读下文了解更多详情

拉取请求

为了建立一个健康的社区,我们必须迅速响应代码贡献。在过去几年中,我们对社区贡献的审查优先级较低,累积了 280 个拉取请求(2018 年 12 月)。在第一个里程碑中,我们将未处理的拉取请求数量减少到约 65 个。同时,每天打开的拉取请求平均数量从 3.5 个增加到 7 个,这意味着我们在过去三个月内处理了大约 600 个拉取请求

我们合并了近三分之二的拉取请求,并关闭了三分之一。如果拉取请求已过时、质量低劣或不必要地增加了项目的范围,它们将被关闭而不合并。大多数已合并的拉取请求修复了错误、改善了跨平台兼容性或引入了新功能。值得注意的贡献包括改进类型安全和正在进行的 AndroidX 支持工作。

在 Facebook,我们从 master 分支运行 React Native,因此所有更改都会先经过测试,然后才能进入 React Native 发布版本。在所有已合并的拉取请求中,只有六个导致了问题:四个仅影响内部开发,另外两个在发布候选阶段被发现。

其中一个更显著的社区贡献是更新后的“RedBox”屏幕。这是一个很好的例子,说明社区如何使开发者体验更友好。

瘦核心

React Native 目前有非常广泛的表面区域,其中包含许多在 Facebook 不常使用的、未维护的抽象。我们正在努力缩小表面区域,以使 React Native 更小,并允许社区更好地维护那些在 Facebook 几乎不使用的抽象。

在第一个里程碑中,我们向社区寻求 Lean Core 项目的帮助。反响热烈,我们几乎无法跟上所有的进展。查看不到一个月内完成的所有工作

最令我们兴奋的是,维护者们已经介入,修复了长期存在的问题,添加了测试,并支持了长期以来要求的功能。这些模块在 React Native 内部获得了比以往任何时候都多的支持,这表明这是社区的一大进步。此类项目的例子有 WebView,它在提取后收到了许多拉取请求,以及现在由社区成员维护并获得了急需的改进和修复的 CLI。

主要用户问题

12 月,我们向社区征集了他们不喜欢 React Native 的地方。我们汇总了这些反馈,并对每个问题都进行了回复。幸运的是,我们社区面临的许多问题在 Facebook 也存在。在下一个里程碑中,我们计划解决一些主要问题。

得票最高的问题之一是升级到新版本 React Native 的开发者体验。不幸的是,这不是我们自己会遇到的问题,因为我们在 Facebook 是从 master 分支运行 React Native 的。值得庆幸的是,社区成员已经站出来解决了这个问题。

0.59 版本发布

没有 React Native 社区的帮助,特别是 Mike GrabowskiLorenzo Sciandra,我们将无法发布版本。我们希望改进发布管理流程,并计划从现在开始更多地参与。

  • 我们将与社区成员合作,为每个主要版本撰写博客文章。
  • 当用户升级到新版本时,我们将在 CLI 中直接显示重大更改。
  • 我们将缩短发布所需的时间。我们正在探索增加自动化测试的方法,并创建改进的手动测试计划。

这些计划中的许多都将纳入即将发布的 React Native 0.59 版本。0.59 将附带 React Hooks,一个新的适用于 Android 的 64 位 JavaScriptCore 版本,以及许多性能和功能改进。它目前已作为发布候选版本发布,预计将在未来两周内稳定。

下一步

在接下来的两个月里,我们将继续管理拉取请求,以保持进度,同时开始减少未解决的 GitHub 问题数量。我们将继续通过 Lean Core 项目减小 React Native 的表面区域。我们计划解决社区排名前五的问题。随着社区准则的最终确定,我们将把注意力转向我们的网站和文档。

我们非常高兴能在三月份在伦敦 Facebook 接待十多位社区贡献者,以帮助推动其中的几项工作。我们很高兴您正在使用 React Native,并希望您能看到并感受到我们正在 2019 年进行的改进。几个月后我们将发布另一次更新,同时我们会合并您的拉取请求! ⚛️✌️

2018 年 React Native 社区现状

·4 分钟阅读
Lorenzo Sciandra
核心维护者 & React Native 开发者

2018 年,React Native 社区在 React Native 的开发和沟通方式上做出了多项改变。我们相信几年后回顾时会发现,这一转变是 React Native 的一个转折点。

许多人对 React Native 架构的重写感到兴奋,这广为人知地被称为 Fabric。除此之外,这将修复 React Native 架构中的根本性限制,并将与 JSI 和 TurboModules 一起为 React Native 未来的成功奠定基础。

2018 年最大的转变是赋予 React Native 社区权力。从一开始,Facebook 就鼓励全球开发者参与 React Native 的开源项目。自那时起,许多核心贡献者涌现出来,处理(除其他事项外)发布流程。

这些成员采取了一些实质性措施,利用以下资源使整个社区更有能力塑造这个项目的未来

react-native-releases 📬

这个于一月份创建的仓库,兼具两个目的:一是让所有人能够以更协作的方式跟进新版本发布,二是开放了关于特定版本中包含内容的讨论,供任何希望建议选择性合并(cherry-pick)的人(例如 0.57.8 及其所有早期版本)。

这是摆脱每月发布周期,并转向目前用于 0.57.x 版本的“长期支持”方法背后的驱动力。

达成这些决策的一半功劳归于今年创建的另一个仓库

discussions-and-proposals 🗣

这个于七月份创建的仓库,扩展了为 React Native 对话提供更开放环境的想法。以前,这个需求是通过主仓库中标记为 For Discussion 的议题来处理的,但我们希望将此策略扩展到其他库(例如 React)所采用的 RFC 方法。

这项实验立即在 React Native 生命周期中找到了自己的定位。Facebook 团队现在正使用社区 RFC 流程来讨论 React Native 中可以改进的地方,并协调围绕 Lean Core 项目的各项工作——以及其他有趣的讨论。

@ReactNativeComm 🐣

我们意识到,我们传达这些努力的方式并未达到我们预期的效果,为了让大家更容易跟进 React Native 社区的所有动态(从发布到活跃讨论),我们创建了一个新的 Twitter 账号 @ReactNativeComm,您可以关注它。

如果您不使用该社交网络,请记住您始终可以通过 GitHub 关注仓库;这项功能在过去几个月有所改进,现在可以选择只接收版本发布通知,因此无论如何您都应该考虑使用它。

前景展望 🎓

在过去的 7-8 个月里,核心贡献者们加强了 React Native 社区的 GitHub 组织,以更好地掌控 React Native 的开发,并增强与 Facebook 的协作。但这种方式始终缺乏类似项目可能具备的正式结构。

这个组织可以通过对其托管的所有软件包/仓库强制执行一套标准,为维护者提供一个互相帮助和贡献符合社区约定质量代码的单一场所,从而为更广阔的开发者社区树立榜样。

2019 年初,我们将推出这套新的指导方针。请在专门的讨论区告诉我们您的想法。

我们相信,通过这些改变,社区将变得更具协作性,这样当我们达到 1.0 版本时,我们都将通过这项共同努力,继续编写(甚至更多)出色的应用 🤗


我希望您和我们一样对这个社区的未来感到兴奋。我们很高兴看到大家参与到上述仓库中的讨论,或者通过您将编写的出色代码来贡献。

编程愉快!

开源路线图

·5 分钟阅读
Héctor Ramos
Facebook 工程师

今年,React Native 团队专注于大规模的 React Native 架构重构。正如 Sophie 在她的《React Native 2018 年现状》一文中提到的,我们已经制定了一个计划,旨在更好地支持 Facebook 以外蓬勃发展的 React Native 用户和贡献者。现在是时候分享我们一直在努力的更多细节了。在此之前,我想阐述一下我们对 React Native 在开源领域的长期愿景。

我们对 React Native 的愿景是...

  • 一个健康的 GitHub 仓库。 问题和拉取请求能在合理的时间内得到处理。
    • 提高测试覆盖率。
    • 从 Facebook 代码仓库同步出来的提交不应破坏开源测试。
    • 更大规模的有意义的社区贡献。
  • 稳定的 API, 使其更容易与开源依赖项对接。
    • Facebook 使用与开源相同的公共 API
    • 遵循语义化版本控制的 React Native 版本。
  • 一个充满活力的生态系统。 社区维护的高质量 ViewManagers、原生模块和多平台支持。
  • 出色的文档。 专注于帮助用户创建高质量体验,以及最新的 API 参考文档。

我们确定了以下重点领域,以帮助我们实现这一愿景。

✂️ 瘦核心

我们的目标是通过移除非核心和未使用的组件来减少 React Native 的表面区域。我们将把非核心组件转移给社区,以使其能够更快地发展。缩小后的表面区域将使管理对 React Native 的贡献变得更容易。

WebView 是我们转移给社区的一个组件示例。我们正在开发一个工作流程,允许内部团队在我们将这些组件从仓库中移除后继续使用它们。我们已经确定了数十个其他组件,我们将把它们的拥有权交给社区。

🎁 开源内部组件和 🛠 更新工具

Facebook 产品团队的 React Native 开发体验可能与开源社区大不相同。在开源社区中流行的工具可能在 Facebook 不被使用。可能存在实现相同目的的内部工具。在某些情况下,Facebook 团队已经习惯了 Facebook 之外不存在的工具。当我们开源即将到来的架构工作时,这些差异可能会带来挑战。

我们将努力发布其中一些内部工具。我们还将改进对开源社区中流行工具的支持。以下是我们将要处理的项目的部分列表:

  • 开源 JSI 并使社区能够引入自己的 JavaScript VM,取代 RN 初始版本中现有的 JavaScriptCore。我们将在未来的文章中介绍 JSI 是什么,同时您可以从 Parashuram 在 React Conf 上的演讲中了解更多关于 JSI 的信息。
  • 支持 Android 上的 64 位库。
  • 在新架构下启用调试。
  • 改进对 CocoaPods、Gradle、Maven 和新 Xcode 构建系统的支持。

✅ 测试基础设施

当 Facebook 工程师发布代码时,如果它通过所有测试,则被认为是安全的。这些测试会识别更改是否可能破坏我们自己的 React Native 表面。然而,Facebook 使用 React Native 的方式存在差异。这导致我们可能在不知不觉中破坏了开源的 React Native。

我们将加强内部测试,确保它们在尽可能接近开源的环境中运行。这将有助于防止破坏这些测试的代码进入开源。我们还将致力于基础设施建设,以实现在 GitHub 上更好地测试核心仓库,从而使未来的拉取请求能够轻松地包含测试。

结合缩小的表面区域,这将允许贡献者更快、更有信心地合并拉取请求。

📜 公共 API

Facebook 将通过公共 API 使用 React Native,与开源方式相同,以减少意外的重大更改。我们已开始转换内部调用点来解决此问题。我们的目标是收敛于一个稳定的公共 API,从而在 1.0 版本中采用语义化版本控制。

📣 沟通

React Native 是按贡献者数量计算的 GitHub 上顶级开源项目之一。这让我们非常高兴,我们也希望继续保持下去。我们将继续致力于促使更多贡献者参与的举措,例如提高透明度和开放讨论。文档是 React Native 新手接触的第一批内容之一,但它一直没有成为优先事项。我们希望解决这个问题,首先是恢复自动生成的 API 参考文档,创建更多专注于创建高质量用户体验的内容,并改进我们的发行说明

时间线

我们计划在未来一年左右的时间里完成这些项目。其中一些工作已经进行中,例如JSI 已经进入开源。其他一些工作将需要更长时间才能完成,例如减小表面区域。我们将尽力让社区了解我们的进展。请加入我们的 Discussions and Proposals 仓库,这是 React Native 社区的一项倡议,它促成了本路线图中讨论的几项举措的产生。

发布 0.56

·6 分钟阅读
Lorenzo Sciandra
Drivetribe 的核心维护者 & React Native 开发者

期待已久的 React Native 0.56 版本现已发布 🎉。这篇博客文章重点介绍了此新版本中引入的一些更改。我们还想借此机会解释自三月份以来一直让我们忙碌的工作。

重大更改的困境,或者,“何时发布?”

贡献者指南解释了所有对 React Native 的更改所经历的集成过程。该项目由许多不同的工具组成,需要协调和持续支持才能使一切正常运行。再加上为项目贡献的活跃开源社区,您将感受到这一切令人难以置信的规模。

鉴于 React Native 的广泛采用,重大更改必须谨慎进行,并且该过程并不像我们希望的那样顺利。我们决定跳过 4 月和 5 月的发布,以便核心团队集成和测试一套新的重大更改。在此过程中,我们使用了专门的社区沟通渠道,以确保 2018 年 6 月(0.56.0)版本能够让耐心等待稳定版的用户尽可能无障碍地采用。

0.56.0 完美吗?不,就像市面上的所有软件一样:但我们已经达到了一个权衡点,即“等待更多稳定性”与“测试成功,可以向前推进”之间,我们觉得已准备好发布它。此外,我们意识到在最终的 0.56.0 版本中,仍有 一些 问题 尚未 解决。大多数开发者升级到 0.56.0 应该没有问题。对于那些被上述问题阻碍的开发者,我们希望在我们的讨论中见到您,并期待与您一起解决这些问题。

您可以将 0.56.0 视为迈向更稳定框架的基石:它可能需要一到两周的广泛采用才能解决所有边缘情况,但这将促成 2018 年 7 月(0.57.0)版本更好。

最后,我们想感谢 所有 67 位贡献者,他们总共完成了 818 次提交 (!),这将有助于让您的应用变得更好 👏。

话不多说...

重大变化

Babel 7

如您所知,允许我们使用 JavaScript 最新和最强大功能的转译工具 Babel 即将升级到 v7。由于这个新版本带来了一些重要的变化,我们认为现在是升级的好时机,这将使 Metro 能够利用其改进

如果您在升级时遇到问题,请参考相关文档部分

现代化 Android 支持

在 Android 上,许多周边工具都已发生变化。我们已更新到 Gradle 3.5Android SDK 26Fresco 1.9.0 和 OkHttp 3.10.0,甚至将 NDK API 目标更新到 API 16。这些更改应该不会出现问题,并会带来更快的构建速度。更重要的是,它将帮助开发者遵守下个月生效的新的 Play 商店要求

与此相关,我们特别感谢 Dulmandakh 为实现这一目标提交的众多 PR 👏。

在这个方向上还需要采取更多步骤,您可以在专门的议题(以及 JSC 的一个旁支议题)中跟踪 Android 支持更新的未来规划和讨论。

新 Node、Xcode、React 和 Flow——天哪!

Node 8 现在是 React Native 的标准。它实际上已经进行了测试,但随着 Node 6 进入维护模式,我们全力向前推进。React 也更新到了 16.4,它带来了大量的修复。

我们正在放弃对 iOS 8 的支持,使 iOS 9 成为可支持的最旧 iOS 版本。我们预计这不会成为问题,因为任何可以运行 iOS 8 的设备都可以升级到 iOS 9。这一改变使我们能够移除为运行 iOS 8 的旧设备实现变通方案的很少使用的代码。

持续集成工具链已更新使用 Xcode 9.4,确保所有 iOS 测试都在 Apple 提供的最新开发者工具上运行。

我们已升级到 Flow 0.75,以使用许多开发者赞赏的新错误格式。我们还为更多组件创建了类型。如果您的项目尚未强制执行静态类型,请考虑使用 Flow 在编码时而不是在运行时识别问题。

以及许多其他事情...

例如,YellowBox 被替换为新的实现,这使得调试体验大大改善。

有关完整的发布说明,请参考此处的完整变更日志。请记住关注升级指南,以避免迁移到此新版本时出现问题。


最后一点:从本周开始,React Native 核心团队将恢复每月例会。我们将确保让所有人了解会议内容,并确保在未来的会议中随时参考您的反馈。

祝大家编程愉快!

LorenzoRyan 以及整个 React Native 核心团队

附言: 一如既往,我们想提醒大家,React Native 仍处于 0.x 版本,因为还有许多更改正在进行中——所以请记住,在升级时,是的,可能仍然会崩溃或出现问题。在问题和提交 PR 时互相帮助——并记住遵守强制执行的 行为准则:屏幕的另一端总有人在。

每月发布周期:发布 12 月和 1 月 RC

·3 分钟阅读
Eric Vicenti
Facebook 工程师

React Native 发布后不久,我们开始每两周发布一次版本,以帮助社区采用新功能,同时保持版本稳定以供生产使用。在 Facebook,我们必须每两周稳定一次代码库,以发布我们的生产 iOS 应用,因此我们决定以相同的速度发布开源版本。现在,许多 Facebook 应用每周发布一次,尤其是在 Android 上。由于我们每周从 master 发布,我们需要保持其相当稳定。因此,双周发布节奏甚至不再对内部贡献者有利。

我们经常听到社区反馈说发布速度难以跟上。Expo 等工具不得不跳过每隔一个版本发布,以便管理快速的版本变化。因此,很明显,双周发布并未很好地服务社区。

现在每月发布

我们很高兴宣布新的每月发布周期,以及 2016 年 12 月发布的 v0.40 版本,该版本在上个月一直在稳定,并已准备好供大家采用。(请务必更新 iOS 上原生模块的头文件)。

尽管为避免周末或处理意外问题可能会有几天偏差,但您现在可以预期某个版本会在每月的第一天可用,并在最后一天发布。

使用当月版本以获得最佳支持

一月份的发布候选版本已准备好试用,您可以在此处查看新内容

要了解即将到来的变化并向 React Native 贡献者提供更好的反馈,请尽可能使用当月的发布候选版本。到每月月底每个版本发布时,其中包含的更改将已在生产中的 Facebook 应用中发布超过两周。

您可以使用新的 react-native-git-upgrade 命令轻松升级您的应用

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

我们希望这种更简单的方法能让社区更容易跟踪 React Native 的变化,并尽快采用新版本!

(感谢 Martin Konicek 提出此计划,以及 Mike Grabowski 将其付诸实现)

借助 Git 更轻松地升级

·5 分钟阅读
Nicolas Cuillery
Zenika 的 JavaScript 顾问和培训师

升级到新版本的 React Native 一直很困难。您可能以前见过这样的情况

这些选项都不是理想的。通过覆盖文件,我们会丢失本地更改。不覆盖则无法获取最新更新。

今天,我很荣幸推出一个有助于解决此问题的新工具。该工具名为 react-native-git-upgrade,它在后台使用 Git,尽可能自动解决冲突。

用法

要求:Git 必须在 PATH 中可用。您的项目不必由 Git 管理。

全局安装 react-native-git-upgrade

$ npm install -g react-native-git-upgrade

或者,使用 Yarn

$ yarn global add react-native-git-upgrade

然后,在您的项目目录中运行它

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注意:请勿运行 'npm install' 来安装新版本的 react-native。该工具需要能够比较旧的和新的项目模板才能正常工作。只需在您的应用文件夹中运行它,如上所示,同时仍在使用旧版本。

示例输出

您也可以不带参数运行 react-native-git-upgrade,以升级到最新版本的 React Native。

我们会尽量保留您在 Android 和 iOS 构建文件中的更改,因此升级后您无需运行 react-native link

我们设计的实现尽可能地不具侵入性。它完全基于在一个临时目录中即时创建的本地 Git 仓库。它不会干扰您的项目仓库(无论您使用何种 VCS:Git、SVN、Mercurial 或不使用)。在出现意外错误时,您的源代码会得到恢复。

它是如何工作的?

关键步骤是生成一个 Git 补丁。该补丁包含您的应用正在使用的 React Native 模板版本与新版本之间的所有更改。

要获取此补丁,我们需要从您的 node_modules 目录中 react-native 包内嵌入的模板生成一个应用(这些模板与 react-native init 命令使用的模板相同)。然后,在从当前版本和新版本中的模板生成原生应用后,Git 能够生成一个适应您项目的补丁(即包含您的应用名称)。

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
<dict>
<key>localhost</key>
<dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+ <key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
[...]

现在我们只需要将此补丁应用到您的源文件。虽然旧的 react-native upgrade 过程会对任何微小差异提示您,但 Git 能够使用其三方合并算法自动合并大部分更改,最终留下我们熟悉的冲突分隔符。

    13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);

这些冲突通常很容易理解。分隔符 ours 代表“您的团队”,而 theirs 可以视为“React Native 团队”。

为什么要引入一个新的全局包?

React Native 带有一个全局 CLI(react-native-cli 包),它将命令委托给嵌入在 node_modules/react-native/local-cli 目录中的本地 CLI。

如上所述,该过程必须从您当前的 React Native 版本开始。如果我们将实现嵌入到 local-cli 中,那么在使用旧版本的 React Native 时,您将无法享受此功能。例如,如果这个新的升级代码只在 0.38.0 版本中发布,您将无法从 0.29.2 升级到 0.38.0。

基于 Git 的升级是开发者体验的重大改进,并且重要的是要让每个人都能使用它。通过全局安装一个独立的软件包 react-native-git-upgrade,无论您的项目使用哪个版本的 React Native,您今天都可以使用这个新代码。

另一个原因是 Martin Konicek 最近的 Yeoman 清除行动。我们不希望将这些 Yeoman 依赖项重新引入 react-native 包中,以便能够评估旧模板以创建补丁。

试用并提供反馈

总之,我想说,请享受这个功能,并随时提出改进建议、报告问题,特别是发送拉取请求。每个环境都有些不同,每个 React Native 项目也不同,我们需要您的反馈才能让这项工作对所有人都有益。

谢谢!

我要感谢优秀的公司 ZenikaM6 Web(已归档),没有它们,这一切都不可能实现!

引入 Button,使用 Yarn 更快安装,以及公开路线图

·3 分钟阅读
Héctor Ramos
Héctor Ramos
前 Facebook 开发者宣传师

我们从许多人那里听说,React Native 正在进行大量工作,很难跟踪正在发生的事情。为了帮助传达正在进行的工作,我们现在正在发布React Native 的路线图。从高层次来看,这项工作可以分为三个优先级

  • 核心库。为最有用的组件和 API 添加更多功能。
  • 稳定性。改进底层基础设施以减少错误并提高代码质量。
  • 开发者体验。帮助 React Native 开发者更快地进行开发

如果您对路线图中可能很有价值的功能有建议,请访问 Canny,在那里您可以建议新功能并讨论现有提案。

React Native 中的新功能

今天发布的React Native 0.37 版本引入了一个新的核心组件,使得向任何应用添加可触摸的 Button 变得非常容易。我们还引入了对新的 Yarn 包管理器的支持,这应该会大大加快更新应用依赖项的整个过程。

引入 Button

今天我们推出一个基本的 <Button /> 组件,它在每个平台上都表现出色。这解决了我们收到的最常见的反馈之一:React Native 是唯一一个没有开箱即用按钮的移动开发工具包之一。

Simple Button on Android, iOS

<Button
onPress={onPressMe}
title="Press Me"
accessibilityLabel="Learn more about this Simple Button"
/>

经验丰富的 React Native 开发者知道如何制作一个按钮:在 iOS 上使用 TouchableOpacity 实现默认外观,在 Android 上使用 TouchableNativeFeedback 实现波纹效果,然后应用一些样式。自定义按钮的构建或安装并非特别困难,但我们的目标是使 React Native 变得极其易学。通过在核心中添加一个基本按钮,新手将能够在第一天就开发出一些很棒的东西,而不是将时间花在格式化按钮和学习 Touchable 的细微差别上。

Button 旨在在每个平台上都能良好运行并看起来原生,因此它不会支持自定义按钮所具备的所有花哨功能。它是一个很好的起点,但并非旨在取代您所有现有的按钮。要了解更多信息,请查看新的 Button 文档,其中包含一个可运行的示例!

使用 Yarn 加速 react-native init

您现在可以使用 JavaScript 的新包管理器 Yarn 来显著加快 react-native init 的速度。要查看提速效果,请安装 Yarn 并将您的 react-native-cli 升级到 1.2.0。

$ npm install -g react-native-cli

现在,在设置新应用时,您应该会看到“Using yarn”

Using yarn

在简单的本地测试中,react-native init良好的网络环境下约 1 分钟完成(而使用 npm 3.10.8 时约 3 分钟)。安装 yarn 是可选的,但强烈推荐。

谢谢!

我们要感谢所有为本次发布做出贡献的人。完整的发布说明现已在 GitHub 上提供。凭借二十多个错误修复和新功能,React Native 在您的帮助下不断变得更好。

0.36:Headless JS、键盘 API 及更多

·3 分钟阅读
Héctor Ramos
Héctor Ramos
前 Facebook 开发者宣传师

今天我们发布了 React Native 0.36。继续阅读以了解更多新内容。

Headless JS

Headless JS 是一种在应用后台运行时在 JavaScript 中运行任务的方式。例如,它可用于同步新数据、处理推送通知或播放音乐。目前,它仅适用于 Android。

要开始使用,请在一个专门的文件中定义您的异步任务(例如 SomeTaskName.js

module.exports = async taskData => {
// Perform your task here.
};

接下来,在 AppRegistry 中注册您的任务

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
require('SomeTaskName'),
);

使用 Headless JS 需要编写一些原生 Java 代码,以便您可以在需要时启动服务。请查看我们新的Headless JS 文档了解更多信息!

键盘 API

现在使用 Keyboard 可以更轻松地处理屏幕键盘。您现在可以监听原生键盘事件并对其做出反应。例如,要关闭活动键盘,只需调用 Keyboard.dismiss()

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

动画除法

React Native 已支持通过加法、乘法和模运算组合两个动画值。在 0.36 版本中,现在可以通过除法组合两个动画值。在某些情况下,一个动画值需要反转另一个动画值进行计算。一个例子是反转比例(2x --> 0.5x)。

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
toValue: 2,
}).start();

b 将会跟随 a 的弹簧动画,并生成 1 / a 的值。

基本用法如下

<Animated.View style={{transform: [{scale: a}]}}>
<Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

在这个例子中,内部图像完全不会被拉伸,因为父级的缩放被抵消了。如果您想了解更多,请查看动画指南

深色状态栏

StatusBar 中新增了一个 barStyle 值:dark-content。通过此添加,您现在可以在 Android 和 iOS 上使用barStyle。其行为将如下所示:

  • default:使用平台默认设置(iOS 上为浅色,Android 上为深色)。
  • light-content:使用浅色状态栏,带有黑色文本和图标。
  • dark-content:使用深色状态栏,带有白色文本和图标。

...以及更多

上述只是 0.36 版本中更改的一部分。请查看 GitHub 上的发布说明,了解新功能、错误修复和重大更改的完整列表。

您可以通过在终端中运行以下命令升级到 0.36

$ npm install --save react-native@0.36
$ react-native upgrade

迈向更好的文档

·5 分钟阅读
Kevin Lacker
Facebook 工程经理

优秀开发者体验的一部分是拥有出色的文档。创建好的文档需要付出很多努力——理想的文档应该简洁、实用、准确、完整且令人愉悦。最近,我们一直在努力根据您的反馈改进文档,我们想分享一些我们所做的改进。

内联示例

当您学习一个新的库、一种新的编程语言或一个新的框架时,会有一个美好的时刻,当您第一次编写一些代码,尝试它,看看它是否有效……然后它确实有效了。您创造了一些真实的东西。我们希望将这种直观的体验直接融入到我们的文档中。就像这样

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
render() {
return (
<View style={{flex: 1}}>
<Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
Isn't this cool?
</Text>
<Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
👍
</Text>
</View>
);
}
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

我们认为这些内联示例,借助 Devin Abbott 的帮助,使用 react-native-web-player 模块,是学习 React Native 基础知识的绝佳方式,我们已经更新了针对新 React Native 开发者的教程,尽可能地使用这些示例。快来看看吧——如果您曾好奇修改一小段示例代码会发生什么,这是一种非常好的探索方式。此外,如果您正在构建开发工具,并希望在自己的网站上展示一个实时 React Native 示例,react-native-web-player 可以使其变得简单明了。

核心模拟引擎由 Nicolas Gallagherreact-native-web 项目提供,该项目提供了一种在 Web 上显示 TextView 等 React Native 组件的方式。如果您有兴趣构建共享大部分代码库的移动和 Web 体验,请查看 react-native-web

更好的指南

在 React Native 的某些部分,有多种实现方式,我们收到了反馈,表示我们可以提供更好的指导。

我们有一个新的导航指南,它比较了不同的方法并就您应该使用什么提供了建议——NavigatorNavigatorIOSNavigationExperimental。在中期,我们正在努力改进和整合这些接口。短期内,我们希望更好的指南能让您的生活更轻松。

我们还有一个新的触摸处理指南,它解释了制作类似按钮界面的基础知识,并简要概述了处理触摸事件的不同方法。

我们着手的另一个领域是 Flexbox。这包括关于如何使用 Flexbox 处理布局以及如何控制组件大小的教程。它还包括一个虽然不那么吸引人但希望有用的React Native 中所有控制布局的 props 列表

入门

当您开始在您的机器上设置 React Native 开发环境时,确实需要进行大量的安装和配置工作。让安装成为一个真正有趣和令人兴奋的体验很难,但我们至少可以使其尽可能快速和无痛。

我们构建了一个新的入门工作流程,让您可以在开始时选择您的开发操作系统和移动操作系统,从而提供一个包含所有设置说明的简洁位置。我们还仔细检查了安装过程,以确保一切正常,并确保每个决策点都有明确的建议。在我们的同事身上测试后,我们非常确定这是一个改进。

我们还改进了将 React Native 集成到现有应用的指南。许多使用 React Native 的大型应用,例如 Facebook 应用本身,实际上部分使用 React Native 构建,部分使用常规开发工具。我们希望本指南能让更多人更容易以这种方式构建应用。

我们需要您的帮助

您的反馈让我们知道应该优先处理什么。我知道有些人读了这篇博客文章会想:“更好的文档?哼,X 的文档仍然是一堆垃圾!”。这很好——我们需要这种能量。给出反馈的最佳方式取决于反馈的类型。

如果您发现文档中有错误,例如不准确的描述或无法正常工作的代码,请提交一个问题。将其标记为“Documentation”,以便更容易将其路由给相关人员。

如果没有具体的错误,但文档中的某些内容从根本上令人困惑,那么这不太适合提交 GitHub 问题。相反,请在 Canny 上发布关于文档中需要帮助的领域。这有助于我们在进行更一般的工作(如编写指南)时确定优先级。

感谢您阅读到这里,也感谢您使用 React Native!

React Native:一年回顾

·2 分钟阅读
Martin Konicek
Facebook 软件工程师

自我们开源 React Native 以来已经一年了。最初只是少数工程师的一个想法,现在已成为 Facebook 及其他公司的产品团队正在使用的框架。今天在 F8 大会上,我们宣布微软正在将 React Native 带入 Windows 生态系统,使开发者有可能在 Windows PC、手机和 Xbox 上构建 React Native 应用。它还将提供开源工具和服务,例如适用于 Visual Studio Code 的 React Native 扩展和 CodePush,以帮助开发者在 Windows 平台上创建 React Native 应用。此外,三星正在为其混合平台构建 React Native,这将使开发者能够为数百万智能电视、移动和可穿戴设备构建应用。我们还发布了 适用于 React Native 的 Facebook SDK,这使得开发者更容易将 Facebook 社交功能(如登录、分享、应用分析和 Graph API)整合到他们的应用中。一年之内,React Native 改变了开发者在每个主要平台上构建应用的方式。

这是一段史诗般的旅程——但我们才刚刚开始。以下回顾了自一年前开源以来 React Native 的成长和演变,我们在此过程中遇到的一些挑战,以及我们展望未来时的期望。

这是节选。在Facebook Code上阅读其余内容。