跳到主要内容

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 react-native@0.36
$ react-native upgrade