跳到主要内容

53 篇带有“announcement”标签的文章

查看所有标签

发布 React Native 0.59

·7分钟阅读
Ryan Turner
核心维护者与 React Native 开发者

欢迎使用 React Native 0.59 版本!这是一个重要的版本,由 88 位贡献者提交了 644 次提交。贡献也以其他形式出现,因此感谢您维护问题、培养社区并向人们介绍 React Native。本月带来了一些备受期待的更改,我们希望您会喜欢它们。

🎣 Hooks 来了

React Hooks 是此版本的一部分,它允许您在组件之间重用有状态逻辑。关于 hooks 有很多讨论,但如果您还没有听说过,请查看下面的一些精彩资源

务必在您的应用中尝试一下。我们希望您像我们一样发现重用令人兴奋。

📱 更新的 JSC 意味着性能提升和 Android 上的 64 位支持

React Native 使用 JSC(JavaScriptCore)来驱动您的应用程序。Android 上的 JSC 有几年未更新,这意味着许多现代 JavaScript 功能不受支持。更糟糕的是,与 iOS 上较新的 JSC 相比,其性能很差。随着此版本的发布,这一切都将改变。

感谢 @DanielZlotin@dulmandakh@gengjiawen@kmagiera@kudo 的出色工作,JSC 已经追赶上了过去几年的技术。这带来了 64 位支持、现代 JavaScript 支持以及 巨大的性能改进。感谢他们使这个过程现在变得易于维护,这样我们就可以在不费吹灰之力的情况下利用未来的 WebKit 改进,并感谢 Software Mansion 和 Expo 使这项工作成为可能。

💨 通过内联 require 更快的应用程序启动

我们希望帮助人们默认拥有高性能的 React Native 应用程序,并致力于将 Facebook 的优化带给社区。应用程序根据需要加载资源,而不是减慢启动速度。此功能称为“内联 require”,因为它允许 Metro 识别需要延迟加载的组件。具有深层和多样化组件架构的应用程序将看到最大的改进。

source of the metro.config.js file in the 0.59 template, demonstrating where to enable inlineRequires

我们需要社区在将其默认启用之前告知我们其运行情况。当您升级到 0.59 时,会有一个新的 metro.config.js 文件;将选项切换为 true,然后提供您的反馈!阅读有关内联 require 的性能文档,以对您的应用程序进行基准测试。

🚅 精简核心正在进行中

React Native 是一个庞大而复杂的项目,拥有一个复杂的存储库。这使得代码库对于贡献者来说难以接近,难以测试,并且作为开发依赖项过于庞大。精简核心是我们通过将代码迁移到独立库以实现更好管理的努力。过去几个版本的发布已经迈出了第一步,但让我们认真对待

您可能会注意到,更多组件现在已正式弃用。这是个好消息,因为这些功能现在有所有者积极维护它们。请注意警告消息并迁移到这些功能的新库,因为它们将在未来的版本中删除。下表显示了组件、其状态以及您可以迁移到的位置。

在接下来的几个月里,将有更多的组件遵循这一精简核心的路径。我们正在寻求这方面的帮助 — 请访问精简核心总览以贡献您的力量。

👩🏽‍💻 CLI 改进

React Native 的命令行工具是开发者进入生态系统的入口,但它们长期存在问题且缺乏官方支持。CLI 工具已迁移到一个新存储库,一个专门的维护者团队已经做出了一些令人兴奋的改进。

现在日志格式化得更好了。命令现在几乎立即运行——您会立即注意到差异

0.58's CLI is slow to start0.58's CLI is nearly instantaneous

🚀 升级到 0.59

我们听取了您关于React Native 升级过程的反馈,并且我们正在采取措施在未来的版本中改善用户体验。要升级到 0.59,我们建议使用rn-diff-purge 来确定当前 React Native 版本和 0.59 之间的差异,然后手动应用这些更改。一旦您将项目升级到 0.59,您将能够使用新改进的 react-native upgrade 命令(基于 rn-diff-purge!)在 0.60 及更高版本可用时升级到它们。

🔨 破坏性更改

0.59 中的 Android 支持已根据 Google 的最新建议进行清理,这可能会导致现有应用程序的潜在损坏。此问题可能会表现为运行时崩溃和一条消息:“您需要将 Theme.AppCompat 主题(或其子孙)与此活动一起使用”。我们建议更新您项目的 AndroidManifest.xml 文件,确保 android:theme 值为 AppCompat 主题(例如 @style/Theme.AppCompat.Light.NoActionBar)。

react-native-git-upgrade 命令在 0.59 中已被删除,取而代之的是新改进的 react-native upgrade 命令。

🤗 感谢

许多新贡献者帮助完成了从 flow 类型生成原生代码解决 Xcode 警告 — 这些是了解 React Native 工作原理和为公益做出贡献的好方法。谢谢!请关注未来类似的 issues。

虽然这些是我们注意到的亮点,但还有许多其他值得兴奋的更新。要查看所有更新,请查看更新日志。0.59 是一个巨大的发布 — 我们迫不及待地希望您尝试它。

今年剩下的时间里,我们还将带来更多改进。敬请期待!

Ryan 和整个React Native 核心团队

2019 年 3 月 React Native 开源更新

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

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

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

在过去的两个月里,我们取得了比预期更多的进展。请继续阅读以了解更多详情

拉取请求

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

我们合并了 近三分之二 的 pull requests,关闭了三分之一。如果 pull requests 过时、质量低下或不必要地增加了项目的表面积,它们就会被关闭而未被合并。大多数合并的 pull requests 修复了 bug、提高了跨平台一致性或引入了新功能。值得注意的贡献包括提高了类型安全性以及正在进行的 AndroidX 支持工作。

在 Facebook,我们从 master 分支运行 React Native,因此我们在将所有更改发布到 React Native Release 之前首先进行测试。在所有合并的拉取请求中,只有六个导致了问题:四个只影响内部开发,两个在发布候选阶段被发现。

一项更引人注目的社区贡献是 更新的“RedBox”屏幕。这是社区让开发者体验更友好的一个很好的例子。

精简核心

React Native 目前的表面积非常广,其中有许多未维护的抽象,我们在 Facebook 并没有大量使用。我们正在努力减少表面积,以使 React Native 更小,并允许社区更好地维护在 Facebook 几乎不使用的抽象。

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

让我们最激动的是,维护者们已经积极地修复了长期存在的问题,添加了测试,并支持了长期以来大家要求的功能。这些模块获得了比以往在 React Native 内更多的支持,表明这是社区迈出的重要一步。例如, WebView 在被提取后 收到了许多 pull requests,而 CLI 现在 由社区成员维护 并获得了急需的改进和修复。

主要用户问题

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

投票最多的问题之一是升级到更高版本的 React Native 的开发人员体验。不幸的是,这不是我们自己经历的问题,因为我们从 master 运行 React Native。值得庆幸的是,社区成员已经开始着手解决这个问题

0.59 版本

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

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

这些计划中的许多内容将纳入即将发布的 React Native 0.59 版本。0.59 将支持 React Hooks,为 Android 提供新的 64 位 JavaScriptCore 版本,并包含许多性能和功能改进。该版本目前已发布为候选版本,预计将在两周内稳定。

后续步骤

在接下来的两个月里,我们将继续管理 pull requests 以保持进度,同时开始减少未关闭的 GitHub issue 数量。我们将继续通过 Lean Core 项目减少 React Native 的表面积。我们计划解决 5 个社区面临的首要问题。随着社区指南的最终确定,我们将把注意力转向我们的网站和文档。

我们非常高兴在三月份在 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 Community GitHub组织,以承担更多React Native开发的责任,并加强与Facebook的协作。但这一切一直缺乏与其他类似项目相同的正式结构。

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

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

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


我希望您和我们一样对这个社区的未来感到兴奋。我们很高兴看到您参与到上述仓库中的讨论或您将创作的精彩代码中。

快乐编码!

开源路线图

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

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

我们对 React Native 的愿景是……

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

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

✂️ 精简核心

我们的目标是 减小 React Native 的表面积,移除非核心和未使用的组件。我们将把非核心组件转移给社区,以便社区能够更快地发展。减小的表面积将使管理 React Native 的贡献变得更加容易。

WebView 是一个我们已转移给社区的组件示例。我们正在制定一个工作流程,以便内部团队在我们将这些组件从仓库中移除后,能够继续使用它们。我们已经确定了 数十个更多组件 将移交给社区进行管理。

🎁 开源内部结构和 🛠更新工具

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

我们将努力发布一些内部工具。我们还将改进对开源社区流行工具的支持。以下是我们将要解决的项目的不完全列表

  • 开源 JSI 并允许社区引入自己的 JavaScript 虚拟机,替换 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 已经开源。另一些则需要更长的时间来完成,例如减小表面积。我们将尽最大努力让社区了解我们的进展。请加入我们 讨论与提案 仓库,这是 React Native 社区的一项举措,促成了本路线图中讨论的几项工作的诞生。

发布 0.56

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

备受期待的 React Native 0.56 版本现已发布 🎉。本文将重点介绍此新版本中的一些更改。我们还想借此机会解释一下自三月份以来我们一直忙于哪些事情。

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

贡献者指南》解释了 React Native 的所有更改都必须经历的集成过程。该项目由许多不同的工具组成,需要协调和持续支持才能使一切正常运行。再加上为项目做出贡献的充满活力的开源社区,您将体会到这一切的宏大规模。

随着 React Native 的广泛应用,破坏性更改必须格外小心地进行,而且这个过程并非我们期望的那么顺利。我们决定跳过四月和五月的发布,以便核心团队能够集成和测试一套新的破坏性更改。在此过程中,我们使用了专门的社区沟通渠道,以确保 2018 年 6 月(0.56.0)版本对那些耐心等待稳定版本的用户来说尽可能轻松。

0.56.0 是完美的吗?不,正如市面上的所有软件一样:但我们已经达到了一个点,在这个点上,“等待更多稳定性”与“测试取得了成功的结果,因此我们可以继续前进”之间的权衡,让我们觉得已经准备好发布了。此外,我们知道最终的 0.56.0 版本 未解决 一些 问题。大多数开发者在升级到 0.56.0 时应该不会遇到问题。对于那些因上述问题而受阻的用户,我们希望在我们的讨论中看到您,并且期待与您一起找到解决这些问题的方法。

您可以将 0.56.0 视为构建更稳定框架的基础:可能需要一到两周的广泛采用才能消除所有边缘情况,但这将导致 2018 年 7 月 (0.57.0) 发布更加出色。

我们想借此机会感谢所有 67 位贡献者,他们提交了总计 818 个 commit(!),这些提交将使您的应用程序变得更好 👏。

现在,话不多说...

重大更改

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,从而使之成为可能 👏。

在这一方向上还需要采取一些进一步的措施,您可以在专用 issue(以及关于JSC的附带 issue)中跟踪 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 版本,因为仍有许多更改正在进行中——所以请记住,在升级时,是的,很可能仍然会遇到崩溃或损坏的情况。请在 issue 和提交 PR 时互相帮助——并请记住遵守强制执行的行为准则:屏幕的另一边总是一个活生生的人。

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

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

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

我们经常从社区收到反馈,表示发布的节奏很难跟上。像 Expo 这样的工具不得不跳过每一次发布,以应对快速的版本变化。因此,很明显,双周发布并没有很好地服务于社区。

现在每月发布

我们很高兴地宣布新的月度发布节奏,以及十二月 2016 年的发布,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 变得极其容易学习。通过在核心中添加一个基本按钮,新手将能够在他们的第一天开发出一些很棒的东西,而不是将时间花在格式化 Button 和学习 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”(正在使用 yarn)。

Using yarn

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

谢谢!

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

0.36:无头 JS、键盘 API 等

·3 分钟阅读
Héctor Ramos
Héctor Ramos
前 Facebook 开发者倡导者

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

无头 JS

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

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

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

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

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

使用无头 JS 需要编写一些原生的 Java 代码,以便在需要时启动服务。查看我们新的 无头 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);

我们认为这些内联示例,使用 react-native-web-player 模块,并在 Devin Abbott 的帮助下,是学习 React Native 基础知识的绝佳方式,并且我们已更新了 面向新 React Native 开发者的教程,尽可能地使用它们。快去看看吧 - 如果您曾经好奇修改一小段示例代码会发生什么,这是一种很好的探索方式。此外,如果您正在构建开发者工具,并希望在自己的网站上展示实时的 React Native 示例,react-native-web-player 可以轻松实现这一点。

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

更好的指南

在 React Native 的某些部分,有多种方法可以完成事情,我们收到了反馈,认为我们可以提供更好的指导。

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

我们还有一个新的 处理触摸的指南,它解释了一些创建按钮类界面的基本知识,并简要总结了处理触摸事件的不同方法。

我们还改进了 Flexbox 领域。这包括关于如何 使用 Flexbox 处理布局 和如何控制 组件尺寸 的教程。它还包括一个不太吸引人但希望有所帮助的 控制 React Native 中布局的所有 prop 的列表

入门

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

我们构建了一个 新的入门工作流程,允许您预先选择您的开发操作系统和移动操作系统,从而提供一个简洁的地方,包含所有设置说明。我们还对安装过程进行了审查,以确保一切正常,并确保每个决策点都有清晰的建议。在对我们的无辜同事进行测试后,我们确信这是一项改进。

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

我们需要您的帮助

您的反馈让我们知道我们应该优先考虑什么。我知道有些人会读这篇博客文章并想“更好的文档?哼。X 的文档仍然是垃圾!”。这很好——我们需要这种动力。提供反馈的最佳方式取决于反馈的类型。

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

如果没有具体的错误,但文档中的某些内容根本上令人困惑,那么它不适合在 GitHub issue 中提出。相反,请在 Canny 上发布关于需要改进的文档区域的反馈。这有助于我们在进行指南编写等更普遍的工作时确定优先级。

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