跳至主内容

1 篇文章 标记为 "announcement"

查看所有标签

0.36:Headless JS、键盘 API 等新特性

· 1 分钟阅读
Héctor Ramos
Héctor Ramos
Former Developer Advocate @ Facebook
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

今天我们正式发布 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 API 让屏幕键盘操作更加便捷。现在你可以监听原生键盘事件并作出响应。例如,要关闭当前键盘只需调用 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

迈向更完善的文档

· 1 分钟阅读
Kevin Lacker
Facebook 工程经理
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

卓越的开发者体验离不开卓越的文档支持。编写优质文档需要付出诸多努力——理想的文档应具备简洁性、实用性、准确性、完整性和愉悦性。近期我们根据您的反馈持续优化文档,现与您分享部分改进成果。

内联示例

当您学习新库、新编程语言或新框架时,总会有个美妙瞬间:初次编写代码片段,尝试运行,观察结果...然后它_真的_运行成功了!您亲手创造了实际成果。我们致力于将这种沉浸式体验融入文档中,例如:

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);

我们相信这些内联示例(借助 Devin Abbott 开发的 react-native-web-player 模块)是学习 React Native 基础的最佳途径。为此我们更新了面向新手的 React Native 教程,尽可能采用此类示例。欢迎体验——如果您曾好奇修改示例代码会产生什么变化,这将是绝佳的探索方式。此外,若您正在开发工具并希望在自有站点展示实时 React Native 示例,react-native-web-player 能让此过程变得简单直接。

核心模拟引擎由 Nicolas Gallagherreact-native-web 项目提供,该项目支持在 Web 端展示 TextView 等 React Native 组件。如果您希望构建共享大量代码的移动端与 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:一年回顾

· 1 分钟阅读
Martin Konicek
Facebook 软件工程师
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

自我们将 React Native 开源以来,已经过去了一年。当初只是几位工程师的构想,如今已成为 Facebook 内外产品团队广泛使用的框架。今天在 F8 大会上,我们宣布微软正将 React Native 引入 Windows 生态,让开发者能够在 Windows PC、Phone 和 Xbox 上构建 React Native 应用。微软还将提供 Visual Studio Code 的 React Native 扩展和 CodePush 等开源工具与服务,帮助开发者在 Windows 平台上创建 React Native 应用。此外,三星正在为其混合平台构建 React Native,使开发者能够为数百万台 SmartTV 及移动和可穿戴设备开发应用。我们还发布了 Facebook SDK for React Native,让开发者能更轻松地将登录、分享、应用分析和 Graph API 等 Facebook 社交功能集成到应用中。短短一年间,React Native 已经改变了开发者在各大主流平台的构建方式。

这是一段激动人心的旅程——而我们才刚刚启航。在此,我们将回顾 React Native 自一年前开源以来的成长与演变,分享我们途中遇到的挑战,并展望未来的发展方向。

本文为节选。阅读完整文章请访问 Facebook Code

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

· 1 分钟阅读
Facebook 软件工程师
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

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

在 Facebook,我们在生产环境中使用 React Native 已经超过一年。差不多正好一年前,我们的团队着手开发 Ads Manager 应用。我们的目标是创建一个新应用,让数百万在 Facebook 上投放广告的用户能够随时随地管理账户并创建新广告。最终,它不仅是 Facebook 第一个完全使用 React Native 构建的应用,也是第一个跨平台应用。在本文中,我们将分享我们如何构建这个应用,React Native 如何让我们更快地推进,以及我们吸取的经验教训。

本文为节选。阅读完整文章请访问 Facebook Code

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

· 1 分钟阅读
Tom Occhino
Facebook 工程经理
非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

两年前我们将 React 推向世界,此后它在 Facebook 内外都取得了令人瞩目的发展。如今,即使没有人被强制使用它,Facebook 的新 Web 项目通常都以某种形式采用 React 构建,整个行业也都在广泛接纳这项技术。工程师们每天选择使用 React,因为它能让他们更专注于产品本身,而非与框架作斗争。然而直到我们使用 React 开发一段时间后,才开始真正理解其强大之处。

React 要求我们将应用拆分为离散的组件,每个组件代表单一视图。这些组件让产品迭代更轻松——因为修改局部功能时无需在脑中构建整个系统。更重要的是,React 用声明式 API 封装了 DOM 的易变命令式接口,提升了抽象层级并简化了编程模型。我们发现使用 React 构建时,代码可预测性大幅提高。这种可预测性让我们能自信地快速迭代,应用也因此更加可靠。此外,不仅基于 React 的应用更易扩展,我们还发现团队规模也更易扩展。

凭借 Web 的快速迭代周期,我们已用 React 构建了诸多出色产品,包括 Facebook.com 的许多组件。同时我们还在 React 基础上构建了 Relay 等卓越的 JavaScript 框架,极大简化了大规模数据获取。当然,Web 只是故事的一部分。Facebook 还拥有基于割裂的专有技术栈构建的 Android 和 iOS 应用。多平台开发不仅分裂了我们的工程组织,也仅是原生移动应用开发困境的冰山一角。

本文为节选。请访问 Facebook Code 阅读全文。