跳到主要内容

让 React Native 应用支持无障碍功能

· 阅读需 2 分钟
Georgiy Kassabli
Facebook 软件工程师

随着 React 在网页端和 React Native 在移动端的推出,我们为开发者提供了一个全新的前端框架以构建产品。构建一个强健产品的关键之一是确保任何人都能使用它,包括视力障碍或其他残疾人士。React 和 React Native 的无障碍 API 使您能够让任何基于 React 的体验为可能使用辅助技术的人所用,比如盲人和视障者使用的屏幕阅读器。

在本文中,我们将重点介绍 React Native 应用。我们设计的 React 无障碍 API 与 Android 和 iOS 的 API 看起来和感觉上都相似。如果你之前为 Android、iOS 或网页开发过无障碍应用,你应该会对 React AX API 的框架和命名感到熟悉。例如,你可以让一个 UI 元素 accessible(因此它能被辅助技术访问),并使用 accessibilityLabel 来为该元素提供一个字符串描述:

<View accessible={true} accessibilityLabel=”这是一个简单视图”>

让我们通过看看 Facebook 自家的一个基于 React 的产品 —— 广告管理器应用 来演示 React AX API 更加复杂的应用场景。

这是节选内容。阅读全文请访问 Facebook Code

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

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

今年早些时候,我们推出了iOS 版 React Native。React Native 将开发者在网页端使用 React 时所熟悉的声明式自包含 UI 组件和快速开发周期带到了移动平台,同时保持了原生应用的速度、逼真度和使用感受。今天,我们很高兴地发布了 Android 版 React Native。

在 Facebook,我们已经在生产环境中使用 React Native 超过一年。几乎正好一年前,我们团队开始开发广告管理器应用。我们的目标是创建一款新应用,让数百万在 Facebook 上投放广告的用户能够随时管理账户并创建新广告。最终,这不仅是 Facebook 第一个完全基于 React Native 的应用,也是第一个跨平台应用。在这篇文章中,我们想与大家分享我们如何构建这款应用,React Native 如何帮助我们提速,以及我们所学到的经验教训。

以上为节选内容。请在Facebook Code阅读全文。

React Native:将现代网页技术引入移动端

· 阅读需 2 分钟
Tom Occhino
Facebook 工程经理

我们在两年前向世界介绍了React,此后它在 Facebook 内外都取得了令人瞩目的增长。如今,虽然没人被强制使用它,但 Facebook 上的新网页项目通常会以某种形式使用 React,并且它正在业界被广泛采用。工程师们每天选择使用 React,是因为它让他们能更多地专注于产品,而不是花费大量时间与框架“斗争”。不过,直到我们使用 React 开发了一段时间之后,才真正理解它为何如此强大。

React 强制我们将应用拆分为离散的组件,每个组件表示一个单独的视图。这些组件让我们更容易迭代产品,因为修改某一部分时无需在脑中保持整个系统的全貌。但更重要的是,React 用声明式的方式包装了 DOM 的变异式、命令式 API,这提升了抽象层次,简化了编程模型。我们的发现是,使用 React 开发时,代码更加可预测。这种可预测性让我们能更有信心快速迭代,也让应用变得更加可靠。此外,使用 React 构建应用不仅更易于扩展,我们还发现团队规模的扩展也更为便捷。

结合网页的快速迭代周期,我们用 React 构建了一些很棒的产品,包括 Facebook.com 的许多组件。此外,我们基于 React 构建了强大的 JavaScript 框架,比如 Relay,它能够大幅简化大规模数据获取。当然,网页只是故事的一部分。Facebook 还有广泛使用的 Android 和 iOS 应用,它们基于彼此独立且封闭的技术栈构建。在多个平台之上进行应用开发,使我们的工程组织分裂开来,但这只是移动原生应用开发难点之一。

以上为节选。请在Facebook Code阅读完整文章。