跳到主要内容

51 篇标记为“announcement”的文章

查看所有标签

2018 年 React Native 社区状况

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

2018 年,React Native 社区对我们开发 React Native 以及与之沟通的方式进行了一些更改。我们相信,几年后回顾,我们会发现这种转变是 React Native 的转折点。

很多人对 React Native 架构的重写感到兴奋,这被广泛称为 Fabric。 除此之外,这将修复 React Native 架构中的基本限制,并为 React Native 未来的成功以及 JSI 和 TurboModules 奠定基础。

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 的问题处理,但我们希望将此策略扩展到其他库(例如 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 参考文档。

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

✂️ Lean Core

我们的目标是 通过删除非核心和未使用的组件来减少 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

·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) 版本。

我们想通过感谢 总共提交了 818 次提交 (!) 的 67 位贡献者 来结束本节,这些提交将帮助您的应用变得更好 👏。

现在,事不宜迟...

重大更改

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

PS: 与往常一样,我们要提醒大家,React Native 仍处于 0.x 版本控制中,因为仍有许多更改正在进行中 - 因此请记住,升级时,是的,可能仍然会发生崩溃或损坏。在问题和提交 PR 时互相帮助 - 并记住遵守强制执行的 CoC:屏幕的另一侧始终是人。

每月发布节奏:发布 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 能够使用其 3 向合并算法自动合并大部分更改,并最终为我们留下熟悉的冲突分隔符。

    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 wipeout。我们不想将这些 Yeoman 依赖项重新引入到 react-native 包中,以便能够评估旧模板以创建补丁。

试用并提供反馈

总而言之,我想说,享受这个功能,并随时提出改进建议、报告问题,尤其是发送 pull request。每个环境都略有不同,每个 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

现在,在设置新应用程序时,您应该会看到“正在使用 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>

在此示例中,内部图像根本不会被拉伸,因为父级的缩放被抵消了。如果您想了解更多信息,请查看动画指南

深色状态栏

一个新的 barStyle 值已添加到 StatusBardark-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

迈向更好的文档

·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 中所有控制布局的属性列表

入门指南

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

我们构建了一个 新的入门工作流程,可让您预先选择您的开发操作系统和您的移动操作系统,以在一个简洁的地方提供所有设置说明。我们还完成了安装过程,以确保一切正常运行,并确保每个决策点都有明确的建议。在我们的无辜同事身上测试之后,我们非常确定这是一个改进。

我们还致力于 将 React Native 集成到现有应用程序的指南。许多使用 React Native 的最大型应用程序(例如 Facebook 应用程序本身)实际上是用 React Native 构建应用程序的一部分,另一部分使用常规开发工具构建。我们希望本指南能让更多人更容易以这种方式构建应用程序。

我们需要您的帮助

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

如果您在文档中发现错误,例如不准确的描述或实际上无法工作的代码,请提交 issue。用“Documentation”标记它,以便更容易将其路由到合适的人员。

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

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

React Native:年度回顾

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

自我们开源 React Native 以来已经一年了。最初只是少数工程师的想法,现在已成为 Facebook 内外产品团队都在使用的框架。今天在 F8 大会上,我们宣布 Microsoft 正在将 React Native 带到 Windows 生态系统,让开发者有可能在 Windows PC、手机和 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 上阅读帖子的其余部分。

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

·一分钟阅读
Facebook 软件工程师

今年早些时候,我们介绍了 React Native for iOS。React Native 将开发者在 Web 上从 React 中习惯使用的东西——声明式的、自包含的 UI 组件和快速的开发周期——带到移动平台,同时保留了原生应用程序的速度、保真度和感觉。今天,我们很高兴发布 React Native for Android。

在 Facebook,我们已经在生产环境中使用 React Native 一年多了。大约一年前,我们的团队开始开发 广告管理工具应用程序。我们的目标是创建一个新的应用程序,让数百万在 Facebook 上投放广告的人可以随时随地管理他们的帐户并创建新的广告。最终,它不仅成为 Facebook 的第一个完全使用 React Native 开发的应用程序,也成为第一个跨平台的应用程序。在这篇文章中,我们想与您分享我们是如何构建这个应用程序的,React Native 如何使我们能够更快地行动,以及我们学到的经验教训。

这是一段摘录。请在 Facebook Code 上阅读帖子的其余部分。