跳至主要内容

51 篇关于“公告”的帖子

查看所有标签

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 📬

这个于 1 月份创建的仓库,有两个目的:允许每个人以更协作的方式跟上新的版本,并向任何想要建议 cherry-pick 的人开放关于某个版本包含哪些内容的讨论(例如 0.57.8 及其所有之前的版本)。

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

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

discussions-and-proposals 🗣

这个于 7 月份创建的仓库,扩展了关于 React Native 讨论的更开放环境的想法。之前,这种需求由主仓库中标记为 For Discussion 的问题来处理,但我们希望将这种策略扩展到其他库使用的 RFC 方法(例如 React)。

这个实验立即在 React Native 生命周期中找到了自己的作用。Facebook 团队现在正在使用社区 RFC 流程来讨论哪些方面可以 在 React Native 中得到改进,并协调围绕 精简核心项目 的工作——以及其他有趣的讨论。

@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 现状帖子 中提到的,我们已经制定了一个计划,以更好地支持蓬勃发展的 React Native 用户和 Facebook 之外的协作者群体。现在是时候分享更多关于我们一直在努力的事情的细节了。在此之前,我想阐述一下我们在开源中对 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 虚拟机,以替换 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

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

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

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

贡献者指南解释了对 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 👏。

在这个方向上还需要采取一些步骤,您可以关注更新 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 核心团队

附注:与往常一样,我们想提醒大家,React Native 仍处于 0.x 版本,因为还有许多变更正在进行中,因此请记住,在升级时,可能会发生一些崩溃或故障。在遇到问题或提交 PR 时,请互相帮助,并请遵守实施的 行为准则:屏幕的另一端始终是人。

每月发布节奏:发布 12 月和 1 月 RC 版本

·阅读时间:2分钟
Eric Vicenti
Facebook 工程师

在 React Native 发布后不久,我们便开始每两周发布一次,以帮助社区采用新功能,同时保持生产环境版本的稳定性。在 Facebook,我们必须每两周稳定一次代码库,以便发布我们的 iOS 生产应用,因此我们决定以同样的速度发布开源版本。现在,许多 Facebook 应用每周发布一次,尤其是在 Android 上。由于我们每周从 master 分支发布,因此我们需要保持其相当稳定。因此,每两周发布一次的节奏对内部贡献者来说也没有任何益处了。

我们经常听到社区的反馈,认为发布频率难以跟上。像 Expo 这样的工具不得不跳过每个版本,以管理快速变化的版本。因此,很明显,每两周发布一次的节奏并没有很好地服务于社区。

现在每月发布

我们很高兴地宣布新的每月发布节奏,以及 2016 年 12 月的版本 v0.40,该版本已在整个上个月稳定下来,并已准备好采用。(只需确保 更新 iOS 上原生模块的头文件)。

尽管可能会因避免周末或处理意外问题而有所不同,但您现在可以预期某个版本会在每月第一天发布,并在最后一天发布。

使用当前月份以获得最佳支持

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

要查看即将发生的更改并向 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 更轻松地升级

·阅读时长 4 分钟
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 包),该 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 wipeout。我们不想将这些 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 开发人员知道如何制作按钮:在 iOS 上使用 TouchableOpacity 获取默认外观,在 Android 上使用 TouchableNativeFeedback 获取波纹效果,然后应用一些样式。自定义按钮的构建或安装并不特别困难,但我们的目标是使 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”

Using yarn

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

谢谢!

我们要感谢所有为本次发布做出贡献的人。完整的发布说明现已在 GitHub 上提供。React Native 拥有超过 20 多个错误修复和新功能,感谢您,它变得越来越好。

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 [email protected]
$ react-native upgrade

迈向更好的文档

·阅读时长 4 分钟
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 中控制布局的所有 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上阅读文章的其余部分。

适用于 Android 的 React Native:我们如何构建第一个跨平台 React Native 应用

·阅读时间:1分钟
Facebook软件工程师

今年早些时候,我们推出了适用于iOS的React Native。React Native将开发者在Web上使用React所熟悉的特性——声明式的自包含UI组件和快速的开发周期——带到移动平台,同时保留了原生应用的速度、保真度和体验。今天,我们很高兴发布适用于Android的React Native。

Facebook已经在生产环境中使用React Native超过一年了。大约一年前,我们的团队着手开发广告管理应用。我们的目标是创建一个新的应用,让数百万在Facebook上投放广告的用户能够随时随地管理其账户并创建新的广告。最终,它不仅成为Facebook首个完全使用React Native构建的应用,而且也是第一个跨平台应用。在这篇文章中,我们想与大家分享我们是如何构建这个应用的,React Native如何帮助我们加快开发速度,以及我们从中吸取的经验教训。

这是节选内容。请在Facebook Code上阅读文章的其余部分。