跳到主要内容

7 篇博文 含有标签「工程」

查看所有标签

React Native 0.82 - 新纪元

· 阅读需 12 分钟
Vitali Zaidman
Vitali Zaidman
Software Engineer @ Meta
Nicola Corti
Nicola Corti
Software Engineer @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Alan Hughes
Alan Hughes
Software Engineer @ Expo

今天我们很高兴发布 React Native 0.82:第一版完全运行在新架构(New Architecture)上的 React Native。

这是 React Native 的一个里程碑版本,我们相信这是一个新纪元的开始。在未来的版本中,我们将移除遗留架构(Legacy Architecture)中的剩余代码,以减少安装包大小并简化代码库。

此外,0.82 还推出了实验性的 Hermes 新版本 Hermes V1 的可选支持。我们也通过升级 React 版本到 19.1.1 启用多个 React 新功能,并加入了对 DOM Node API 的支持。

重点内容​

React Native 核心贡献者峰会 2024 回顾

· 阅读需 9 分钟
Michał Pierzchała
Michał Pierzchała
Head of Technology @ Callstack
Szymon Rybczak
Szymon Rybczak
Software Engineer @ Callstack
Mo Javad
Mo Javad
Head of Mobile (UK) @ Theodo
Steven Moyes
Steven Moyes
Senior Product Manager @ Microsoft

每年,React Native 社区的核心贡献者都会与 React Native 团队聚在一起,共同协作塑造这个项目的未来方向。

去年也不例外——只有一点小改变。我们通常会在 React Universe Conf(前身为 React Native EU)前一天,在位于弗罗茨瓦夫的 Callstack 总部见面。2024 年,吸取以往经验,我们举办了为期两天的峰会,这样可以拥有更多非结构化的交流时间。

all-participants

介绍新的 iOS WebViews

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

长期以来,Apple 一直鼓励使用 WKWebView 代替 UIWebViews。在即将发布的 iOS 12 中,UIWebViews 将被正式弃用。React Native 的 iOS WebView 实现严重依赖于 UIWebView 类。因此,鉴于这些发展,我们为 React Native 的 WebView 组件构建了一个新的使用 WKWebView 的原生 iOS 后端。

这些更改的收尾工作已经合并在了 这个提交 中,并将在 0.57 版本中提供。

要启用这个新实现,请使用 useWebKit 属性:

<WebView
useWebKit={true}
source={{url: 'https://www.google.com'}}
/>

改进​

UIWebView 没有合理的方式来促进 WebView 中运行的 JavaScript 与 React Native 之间的通信。当从 WebView 发送消息时,我们依赖一种 hack 方式将消息传递给 React Native。简而言之,我们把消息数据编码到一个带有特殊 scheme 的 url 中,并导航 WebView 到该 url。在原生端,我们拦截并取消了这次导航,从 url 中解析数据,最终调用 React Native。此实现容易出错且不安全。我很高兴地宣布,我们利用了 WKWebView 的特性,完全替换了这种方式。

WKWebView 相比 UIWebView 的其他好处包括更快的 JavaScript 执行速度和多进程架构。详情请见此 2014 WWDC。

注意事项​

如果你的组件使用了以下属性,切换到 WKWebView 时可能会遇到问题。当前我们建议避免使用这些属性:

行为不一致:

automaticallyAdjustContentInsets 和 contentInsets(提交)

当你给 WKWebView 添加 contentInsets 时,它不会改变 WKWebView 的视口大小。视口大小保持跟框架一样大。而在 UIWebView 中,视口会实际改变(如果 contentInsets 为正值,视口会变小)。

backgroundColor(提交)

在新的 iOS WebView 实现中,如果你使用此属性,背景颜色可能会闪烁。此外,WKWebView 对透明背景的渲染与 UIWebView 不同。更多细节请参考提交描述。

不支持:

scalesPageToFit(提交)

WKWebView 不支持 scalesPageToFit 属性,因此我们无法在 React Native 的 WebView 组件上实现此功能。

可访问性 API 更新

· 阅读需 6 分钟
陈子琪
加州大学伯克利分校学生

动机​

随着技术的进步和移动应用在日常生活中的重要性日益增加,创建可访问应用的必要性也同样变得更加重要。

React Native 限制较多的可访问性 API 一直是开发者的痛点,因此我们对可访问性 API 进行了一些更新,以便更容易创建包容性的移动应用。

现有 API 存在的问题​

问题一:两个完全不同但又相似的属性——accessibilityComponentType(Android)和 accessibilityTraits(iOS)​

accessibilityComponentType 和 accessibilityTraits 是两个用来告知 Android 上的 TalkBack 和 iOS 上的 VoiceOver 用户正在交互的 UI 元素类型的属性。这两个属性存在的最大问题是:

  1. 它们是两个不同的属性,使用方法不同,但目的相同。 在旧 API 中,这两个属性是分开的(分别针对不同平台),这不仅不方便,也令许多开发者困惑。iOS 上的 accessibilityTraits 允许 17 个不同的取值,而 Android 上的 accessibilityComponentType 只允许 4 个取值。更重要的是,这两个属性大部分取值之间没有重叠。甚至这两个属性的输入类型也不同。accessibilityTraits 允许传入数组或单个特征,而 accessibilityComponentType 只允许传入单个值。
  2. Android 上功能非常有限。 使用旧属性时,TalkBack 只能识别 “button”、“radiobutton_checked” 和 “radiobutton_unchecked” 这几种 UI 元素。

问题二:缺乏可访问性提示(Accessibility Hints)​

可访问性提示帮助使用 TalkBack 或 VoiceOver 的用户理解在交互某个无障碍元素时会发生什么,这些信息无法仅通过无障碍标签传达。这些提示可以在设置面板中开启或关闭。而之前 React Native 的 API 完全不支持可访问性提示。

问题三:忽视了反转颜色设置​

一些视力障碍用户在手机上使用反转颜色以提升屏幕对比度。苹果为 iOS 提供了一个 API,允许开发者忽略特定视图上的反转颜色设置,这样图像和视频使用反转颜色时不会失真。React Native 目前尚不支持该 API。

新 API 设计​

解决方案一:合并 accessibilityComponentType(Android)和 accessibilityTraits(iOS)​

为了解决 accessibilityComponentType 和 accessibilityTraits 之间的混淆,我们决定将它们合并为一个属性。这是合理的,因为两者技术上功能相同,合并后开发者无需再担心平台差异细节即可构建无障碍功能。

背景

在 iOS 中,UIAccessibilityTraits 是一个可以设置在任何 NSObject 上的属性。javascript 端传入的 17 个特征值分别映射到 Objective-C 中的 UIAccessibilityTraits 元素。每个特征用一个长整型表示,所有设置的特征会使用按位或(OR)运算合并。

而在 Android 上,AccessibilityComponentType 是 React Native 提出的概念,并不直接映射到 Android 的任何属性。Android 通过无障碍代理(accessibility delegate)处理无障碍,每个视图默认有一个无障碍代理。若需定制无障碍行为,开发者必须创建新的无障碍代理,重写特定方法,并将该视图的无障碍代理替换成新代理。当开发者设置 AccessibilityComponentType 时,原生代码会基于传入的组件创建一个新的无障碍代理,并设为该视图的代理。

所做的更改

我们希望新属性能成为两个现有属性的超集。我们决定让新属性主要参考已有的 accessibilityTraits,因为 accessibilityTraits 有更多取值。Android 方面的特征功能则通过修改无障碍代理进行 polyfill。

iOS 上的 accessibilityTraits 有 17 个取值,但我们没把所有都包含进新属性,因为部分特征的使用效果未知且很少用到。

这些特征一般有两种用途:描述 UI 元素的角色,或描述其状态。观察既有用法后,大多组合了一个角色值和“state selected”或“state disabled”,或两者皆有。于是,我们决定创建两个新属性:accessibilityRole 和 accessibilityState。

accessibilityRole

新属性 accessibilityRole 用于告知 TalkBack 或 VoiceOver UI 元素扮演的角色。它可取以下值之一:

  • none
  • button
  • link
  • search
  • image
  • keyboardkey
  • text
  • adjustable
  • header
  • summary
  • imagebutton

该属性只允许传入一个值,因为 UI 元素通常不会同时扮演多个角色。例外是图像和按钮,故新增合成角色 imagebutton。

accessibilityStates

新属性 accessibilityStates 用于告知 TalkBack 或 VoiceOver UI 元素当前的状态。它接受包含以下一个或两个值的数组:

  • selected
  • disabled

解决方案二:添加可访问性提示(Accessibility Hints)​

为此,我们新增了 accessibilityHint 属性。设置该属性后,TalkBack 或 VoiceOver 会朗读提示信息。

accessibilityHint

该属性接受一个字符串形式的可访问性提示。

iOS 上,设置该属性会将对应的原生属性 AccessibilityHint 赋值给视图。若 iPhone 里开启了可访问性提示,VoiceOver 会朗读该提示。

Android 上,设置该属性则会将提示值附加到可访问标签后面。此实现方式优点是模拟了 iOS 上提示的行为,但缺点是在 Android 设置中无法像 iOS 那样关闭提示。

我们在 Android 这样设计的原因是,提示通常对应特定操作(例如点击),我们希望平台间行为一致。

解决方案三​

accessibilityIgnoresInvertColors

我们将苹果的 AccessibilityIgnoresInvertColors API 暴露给 JavaScript,现在当你不希望某个视图颜色被反转(比如图片)时,可以将这个属性设为 true,其颜色就不会被反转。

新用法​

这些新属性将在 React Native 0.57 版本中可用。

升级指南​

如果你目前使用 accessibilityComponentType 和 accessibilityTraits,可以按以下步骤升级到新属性。

1. 使用 jscodeshift​

最简单的用例可以通过运行 jscodeshift 脚本替换。

这个 脚本 会替换以下示例:

accessibilityTraits=“trait”
accessibilityTraits={[“trait”]}

为

accessibilityRole=“trait”

此脚本还会删除 AccessibilityComponentType 的实例(假设你设置 AccessibilityComponentType 时也会设置 AccessibilityTraits)。

2. 手动重构​

对于没有对应 AccessibilityRole 值的 AccessibilityTraits 用法,以及传入多个特征的用法,则需手动重构。

通常,

accessibilityTraits= {[“button”, “selected”]}

手动改为

accessibilityRole=“button”
accessibilityStates={[“selected”]}

这些属性已经在 Facebook 的代码库中使用。Facebook 的重构过程非常简单,jscodeshift 脚本解决了半数实例,其余的手动调整,整个过程耗时甚至不到几小时。

希望你会觉得更新后的 API 很有用!请大家继续努力让应用更具可访问性!#包容性

React Native 月刊 #4

· 阅读需 3 分钟
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack

React Native 月度会议持续进行!以下是各团队的会议记录:

Callstack​

  • React Native EU 已经结束。来自33个国家的300多名参与者访问了弗罗茨瓦夫。演讲视频可以在 YouTube 上观看。
  • 会议结束后,我们正逐步恢复开源项目的发布时间表。值得一提的是,我们正在开发react-native-opentok的下一个版本,修复了大部分现有问题。

GeekyAnts​

尝试通过以下方式降低开发者使用 React Native 的门槛:

  • 在 React Native EU 宣布了 BuilderX.io。BuilderX 是一款设计工具,可以直接操作 JavaScript 文件(目前仅支持 React Native),生成美观、易读且可编辑的代码。
  • 推出了 ReactNativeSeed.com ,为你的下一个 React Native 项目提供一套初始化模板。模板选项丰富,包括 TypeScript 和 Flow 用于数据类型,状态管理支持 MobX、Redux 和 mobx-state-tree,支持 CRNA 及纯 React-Native 技术栈。

Expo​

  • 即将发布 SDK 21,支持 react-native 0.48.3,同时带来一系列修复、稳定性提升和新功能,包括视频录制、新的启动屏 API、支持 react-native-gesture-handler 以及改进的错误处理。
  • 关于 react-native-gesture-handler,Krzysztof Magiera 来自 Software Mansion 持续推进此项目,我们协助测试并资助了部分开发时间。SDK 21 集成该功能后,大家可以在 Snack 中轻松试用,非常期待大家的创意展现。
  • 关于改进的错误日志和处理——详情可见这段 Expo 内部 PR 的 gist(特别是“问题2”部分),以及这次提交,它处理了导入 npm 标准库模块失败的情况。React Native 有很多机会在上游改进错误信息,我们会持续推动相关 PR,也欢迎社区加入。
  • native.directory 持续增长,你可以从GitHub 仓库添加你的项目。
  • 参加北美各地的黑客马拉松活动,包括 PennApps、Hack The North、HackMIT 以及即将到来的 MHacks。

Facebook​

  • 正在改进 Android 平台上的 <Text> 和 <TextInput> 组件。(包括 <TextInput> 的原生自动增长,深层嵌套的 <Text> 组件布局问题,更好的代码结构以及性能优化)。
  • 我们依旧在寻找更多贡献者,帮助处理问题和 Pull Request。

Microsoft​

  • 发布了 CodePush 的代码签名功能。React Native 开发者现在可以在 CodePush 中对应用包进行签名。相关公告见 这里。
  • 正在完成 CodePush 与 Mobile Center 的集成,同时考虑增加测试和崩溃集成。

下一次会议​

下一次会议定于 2017 年 10 月 10 日星期三。鉴于这仅是我们的第四次会议,我们希望了解这些会议记录如何为 React Native 社区带来帮助。如果你有任何关于如何改进会议成果的建议,欢迎通过 Twitter 联系我。

React Native 月刊 #3

· 阅读需 5 分钟
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack

React Native 月度会议继续进行!本月的会议稍微短了一些,因为我们的大多数团队都忙于发布产品。下个月,我们将在波兰弗罗茨瓦夫举办的 React Native EU 大会上见面。务必抢购门票,现场见!与此同时,让我们看看团队们正在做些什么。

团队​

在第三次会议上,有 5 个团队加入了我们:

会议纪要​

以下是各团队的纪要:

Callstack​

  • 最近开源了 react-native-material-palette。它能从图片中提取主要颜色,帮助你创建视觉上更吸引人的应用。目前仅支持 Android,但我们正在考虑未来添加 iOS 支持。
  • 我们已经把 HMR 支持合并到了 haul 以及其它一堆很酷的新功能!请查看最新版本发布。
  • React Native EU 2017 即将来临!下个月全是关于 React Native 和波兰的内容!务必在这里抢购最后的门票。

Expo​

  • 推出了对 Snack 中安装 npm 包的支持。Expo 的常规限制依然适用——包不能依赖 Expo 中尚未包含的自定义原生 API。我们还在努力支持在 Snack 中使用多文件和上传资源。Satyajit 将在 React Native Europe 上介绍 Snack。
  • 发布了带有相机、支付、安全存储、磁力计、暂停/恢复文件系统下载和改进的启动/加载屏幕的 SDK20。
  • 继续与 Krzysztof 合作开发 react-native-gesture-handler。欢迎大家试用一下,用它重建之前用 PanResponder 或原生手势识别器实现的手势,并告诉我们遇到了哪些问题。
  • 试验 JSC 调试协议,正在根据 Canny 上的许多功能需求进行工作。

Facebook​

  • 上个月我们讨论了 GitHub 问题追踪器的管理,希望尝试改进,以提升项目的可维护性。
  • 目前,打开的问题数保持在约 600 个,并且看起来可能会维持一段时间。过去一个月,我们关闭了 690 个由于缺少活动(定义为过去 60 天内无评论)的问题。在这690个问题中,有 58 个因多种原因被重新打开(例如维护者承诺修复,或贡献者提出保留问题的有力理由)。
  • 我们计划在可预见的未来继续自动关闭陈旧问题。我们的目标是每个有影响力的问题都能得到响应,但我们还没达到。我们需要所有维护者协助完成问题筛查,确保不遗漏引入回归或破坏性变更的问题,尤其是那些影响新建项目的问题。有意帮忙的朋友可以使用 Facebook GitHub Bot 来筛查问题和拉取请求。新的维护者指南包含了筛查和使用 GitHub Bot 的更多信息。请加入我们的问题特别工作组,并鼓励其他活跃社区成员一同加入!

Microsoft​

  • 新版 Skype 应用基于 React Native 构建,旨在实现跨平台尽可能多的代码共享。基于 React Native 的 Skype 应用目前已在 Android 和 iOS 应用商店上线。
  • 在使用 React Native 构建 Skype 应用时,我们向 React Native 发送了许多拉取请求,修复遇到的 bug 和缺失功能。目前,我们已有约 70个拉取请求被合并。
  • React Native 使我们能够基于同一代码库驱动 Android 和 iOS 版 Skype 应用。我们还希望用该代码库支持 Skype Web 应用。为此,我们打造并开源了名为 ReactXP 的轻量层,位于 React/React Native 之上。ReactXP 提供一套跨平台组件,目标为 iOS/Android 时映射到 React Native,目标为 Web 时映射到 react-dom。ReactXP 的目标类似于另一个开源库 React Native for Web。关于这两个库方法的区别,详见 ReactXP FAQ。

Shoutem​

  • 我们持续努力改进和简化使用 Shoutem 构建应用的开发者体验。
  • 开始将所有应用迁移到 react-navigation,但最终推迟,等待更稳定版本的发布,或等待某个原生导航方案成熟。
  • 将我们所有的 扩展 以及大部分开源库(animation、theme、ui)升级到 React Native 0.47.1。

下次会议​

下次会议定于 2017 年 9 月 13 日星期三。作为我们仅举行的第三次会议,我们想知道这些纪要对 React Native 社区有何帮助。如果你有关于如何改进会议输出的建议,欢迎随时通过我的 Twitter 联系我。

React Native 月刊 #2

· 阅读需 8 分钟
Tomislav Tenodi
Shoutem 产品经理

React Native 月度会议继续进行!本次会议我们迎来了 Infinite Red,他们是 Chain React,React Native 大会 的幕后高手。由于这里大多数人都在 Chain React 做了演讲,我们将会议推迟了一周。大会中的演讲已发布到线上,我鼓励大家去看看。那么,让我们来看看我们的团队最近都在忙些什么。

团队​

在第二次会议中,有 9 个团队参加了我们:

会议记录​

以下是各团队的会议记录:

Airbnb​

Callstack​

  • Mike Grabowski 一如既往地管理着 React Native 的月度发布,包括发布了一些 Beta 版本。尤其是在推进 v0.43.5 版本发布到 npm,因为它为 Windows 用户解除了阻碍!
  • Haul 的开发进展缓慢但持续。已有一个 pull request 添加了热模块替换(HMR),其它改进也已发布。最近有几位业界领袖开始采用它。可能计划开始在这方面的全职付费工作。
  • Michał Pierzchała 来自 Jest 团队,本月加入了 Callstack。他将帮助维护 Haul,并可能参与 Metro Bundler 和 Jest 的工作。
  • Satyajit Sahoo 也加入了我们,太棒了!
  • 开源部门有一堆很酷的项目即将发布。尤其是在将 Material Palette API 引入 React Native 上。计划最终发布我们面向 iOS 的原生组件包,旨在提供 1:1 的原生组件外观与体验。

Expo​

  • 最近推出了 Native Directory,帮助提高 React Native 生态中库的发现和评估效率。问题是:库太多,难以测试,需要手动判定,且并不明显哪些是最好该用的库,也很难判断是否兼容 CRNA/Expo。Native Directory 试图解决这些问题。欢迎查看并添加你的库。库列表见这里。这只是第一步,我们希望这个项目由社区来拥有和维护,而不仅仅是 Expo 的团队。如果你觉得有价值并希望参与改进,欢迎加入!
  • 在 Expo SDK 19 的 Snack 中新增了安装 npm 包的初步支持。如果遇到任何问题请告诉我们,我们还在修复一些 bug。配合 Native Directory,这应能方便测试纯 JS 依赖或包含在 Expo SDK 里的库。试试这些示例:
  • 发布了 Expo SDK19,带来了一系列提升,现在使用了更新版 Android JSC。
  • 正在与 Alexander Kotliarskyi 一起在文档中制作指南,列出提升应用用户体验的技巧。欢迎参与贡献内容或帮忙撰写!
  • 持续推进音频/视频、相机、手势(与 Software Mansion 合作开发的 react-native-gesture-handler)、GL 相机集成及希望在 SDK20(8 月)中首次推出部分功能,同时其他也会有重大改进。开始构建基础设施以支持 Expo 客户端的后台工作(地理位置、音频、通知等)。
  • Adam Miskiewicz 在模仿 UINavigationController 转场效果的 react-navigation 中取得了不错进展。可以先看看他早期的版本,见他的推文——相关版本即将发布。还可关注他提上游的 MaskedViewIOS。如果你有能力且愿意实现 Android 版的 MaskedView,那就太棒了!

Facebook​

  • Facebook 内部正在探索是否可以将原生的 ComponentKit 和 Litho 组件内嵌到 React Native 中。
  • 欢迎为 React Native 贡献!如果你想知道如何贡献,我们的"贡献指南"详细描述了开发流程及提交首个 pull request 的步骤。除编写代码之外,还能通过 triaging issues(问题处理)或更新文档等方式贡献。
    • 截稿时,React Native 有 635 个未关闭的问题和 249 个待合入的 PR。这些数量对维护者是巨大压力,且内部修复的问题很难保证及时更新相关任务。
    • 我们尚未确定处理方式以在满足社区的同时减轻维护者负担。一些(非全部)方案包括关闭陈旧的问题、赋予更多人员管理权限、自动关闭不符合模板的问题。我们编写了“维护者期待”指南,设定预期并避免意外。如果你有好建议帮助维护者提高体验,同时让提出问题和 PR 的人感受到被尊重和重视,请告诉我们!

GeekyAnts​

  • 在 Chain React 上演示了 Designer 工具,它可处理 React Native 文件。许多参会者报名等候名单。
  • 也在关注其他跨平台方案,如 Google Flutter(一个重要对比即将发布)、Kotlin Native 和 Apache Weex,以了解架构差异和学习它们如何提升 React Native 的整体性能。
  • 大部分应用已切换到使用 react-navigation,显著提升了整体性能。
  • 还宣布了 NativeBase Market——React Native 组件和应用的市场(由开发者为开发者打造)。

Infinite Red​

Microsoft​

  • CodePush 已整合进 Mobile Center。现有用户的工作流程无变化。
    • 有用户报告出现了重复应用的问题——因为他们已经在 Mobile Center 有应用。我们正努力解决,如果你有两个应用,请告知,我们能帮你合并。
  • Mobile Center 现支持 CodePush 的推送通知功能。并演示了如何结合通知和 CodePush 来进行 A/B 测试——这是 React Native 架构的独特优势。
  • VS Code 已知在调试 React Native 时出现问题,新版本扩展将在几天内修复。
  • 鉴于微软内部还有许多团队也在致力于 React Native,我们将争取下一次会议时有更广泛团队的代表。

Shoutem​

  • 完成使 React Native 开发在 Shoutem 上更便捷的工作。开发应用时你可以使用所有标准的 react-native 命令。
  • 在解决如何最佳进行 React Native 性能分析上做了大量工作。许多文档已经过时,我们将尽力提交 PR 更新官方文档,或至少在博客中分享结论。
  • 将导航方案切换到 react-navigation,可能很快会给出反馈。
  • 发布了新的 HTML 组件,它能将原始 HTML 转换成 React Native 组件树。

Wix​

  • 开始向 Metro Bundler 提交包含 react-native-repackager 功能的 PR。已升级 react-native-repackager 以支持 RN 44(我们生产环境使用的版本)。用于我们的 detox 模拟测试框架。
  • 过去三周一直在为 Wix 应用编写 detox 测试。这是一次极好的学习体验,了解如何减少如此规模(超 40 名工程师)的应用中的手动 QA。我们修复了若干 detox 问题,新版本刚发布。很高兴地报告,我们目前严格遵循“零闪烁政策”,测试稳定通过。
  • Detox for Android 正在良好推进。社区大力协助,预计两周内发布初版。
  • 我们的性能测试工具 DetoxInstruments 正在逐渐膨胀。计划将其变为独立工具,不再紧耦合 detox。它将支持一般 iOS 应用的性能分析,并与 detox 集成,实现自动化性能指标测试。

下次会议​

下一次会议定于 2017 年 8 月 16 日。作为仅第 2 次会议,我们希望知道这些记录对 React Native 社区有何帮助。欢迎随时在 Twitter 上联系我,提供改进会议产出方式的建议。