跳到主要内容

52 篇带“announcement”标签的帖子

查看所有标签

2019 年 3 月 React Native 开源更新

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

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

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

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

拉取请求

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

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

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

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

精益核心

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

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

最让我们兴奋的是,维护者们积极投入修复长期存在的问题,添加测试,并支持长期请求的功能。这些模块比以往在 React Native 内部得到了更多的支持,这表明这是社区迈出的重要一步。此类项目的例子包括 WebView,自从其提取以来收到了许多拉取请求,以及现在由社区成员维护并获得了急需的改进和修复的 CLI。

主要用户问题

去年12月,我们向社区征求了他们对 React Native 不满意的地方。我们汇总了回复,并逐一回复了每个问题。幸运的是,我们社区面临的许多问题也是 Facebook 内部存在的问题。在下一个里程碑中,我们计划解决一些主要问题。

投票最高的其中一个问题是升级到新版本 React Native 的开发者体验。不幸的是,这不是我们自己会遇到的问题,因为我们是从主分支运行 React Native 的。幸好,社区成员已经主动解决了这个问题。

0.59 版本发布

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

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

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

下一步

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

我们非常高兴能在3月在 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 版本。
  • 一个充满活力的生态系统。 社区维护的高质量 ViewManager、原生模块和多平台支持。
  • 出色的文档。 专注于帮助用户创建高质量体验,以及最新的 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 已经登陆开源。其他一些工作将需要更长时间才能完成,例如缩小表面积。我们将尽最大努力让社区了解我们的进展。请加入我们在 讨论和提案 仓库中的讨论,这是 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次提交(!)来结束本节,这些贡献将帮助您的应用程序变得更好👏。

现在,话不多说...

重大变更

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

在这一方向上还需要采取更多步骤,您可以关注专用问题中关于更新 Android 支持的未来规划和讨论(以及JSC 的附带问题)。

新的 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 核心团队

PS: 一如既往,我们想提醒大家,由于React Native仍在进行许多更改,因此仍处于0.x版本。因此,请记住,在升级时,是的,可能仍会发生崩溃或出现问题。在问题和提交PR时互相帮助,并记住遵守强制执行的行为准则:屏幕对面总是一个活生生的人。

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

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

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

我们经常收到社区的反馈,认为发布速度太快难以跟上。像 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 版引入了一个新的核心组件,使得在任何应用程序中添加可触摸按钮变得非常容易。我们还引入了对新 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 开发者知道如何制作按钮:使用 TouchableOpacity 实现 iOS 上的默认外观,使用 TouchableNativeFeedback 实现 Android 上的波纹效果,然后应用一些样式。自定义按钮并不难构建或安装,但我们的目标是让 React Native 学习起来非常简单。通过在核心中添加一个基本按钮,新入门者将能够在第一天就开发出令人惊叹的东西,而不是花费时间格式化按钮和学习 Touchable 的细微差别。

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

使用 Yarn 加速 react-native init

您现在可以使用 Yarn,这个新的 JavaScript 包管理器,来显著加快 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 项目提供,该项目提供了一种在网络上显示 TextView 等 React Native 组件的方式。如果您有兴趣构建共享大量代码库的移动和网络体验,请查看 react-native-web

更好的指南

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

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

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

我们关注的另一个领域是 Flexbox。这包括关于如何使用 Flexbox 处理布局以及如何控制组件大小的教程。它还包含一个不那么性感但希望有用的React Native 中控制布局的所有属性列表

开始使用

当您开始在自己的机器上设置 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 大会上,我们宣布 Microsoft 将把 React Native 带到 Windows 生态系统,让开发者有机会在 Windows PC、Phone 和 Xbox 上构建 React Native 应用程序。它还将提供开源工具和服务,例如适用于 Visual Studio Code 的 React Native 扩展和 CodePush,以帮助开发者在 Windows 平台上创建 React Native 应用程序。此外,三星正在为其混合平台构建 React Native,这将使开发者能够为数百万智能电视、移动设备和可穿戴设备构建应用程序。我们还发布了 Facebook SDK for React Native,这使得开发者更容易将 Facebook 社交功能,如登录、分享、应用分析和 Graph API 集成到他们的应用程序中。一年之内,React Native 改变了开发者在每个主要平台上构建应用程序的方式。

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

这是一篇节选。阅读完整文章请访问 Facebook Code