跳到主要内容

0.36：无界面 JS、键盘 API 及更多

· 阅读需 3 分钟
Héctor Ramos
Héctor Ramos
Former Developer Advocate @ Facebook

今天我们发布了 React Native 0.36。请继续阅读，了解更多新内容。

无界面 JS（Headless JS）​

无界面 JS 是一种在应用处于后台时运行 JavaScript 任务的方式。例如，它可以用于同步最新数据、处理推送通知或播放音乐。目前仅在 Android 上可用。

开始使用时，在一个专用文件中定义你的异步任务（例如 SomeTaskName.js）：

module.exports = async taskData => {
  // 在这里执行你的任务。
};

接下来，在 AppRegistry 中注册你的任务：

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

使用无界面 JS 需要编写一些本地 Java 代码，以便在需要时启动服务。查看我们新的 无界面 JS 文档 了解更多内容！

键盘 API​

使用 Keyboard 操作屏幕键盘现在变得更简单。你可以监听原生键盘事件并做出响应。例如，要关闭当前活动的键盘，只需调用 Keyboard.dismiss()：

import {Keyboard} from 'react-native';

// 关闭键盘！
Keyboard.dismiss();

动画除法​

React Native 已经支持通过加法、乘法和取模来组合两个动画值。到了 0.36 版本，现已支持通过 除法 来组合两个动画值。有些情况下需要一个动画值反转另一个动画值进行计算，比如反转缩放比例（2 倍 --> 0.5 倍）：

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 上的发行说明 获取完整新特性、bug 修复和破坏性变更列表。

你可以通过在终端运行以下命令升级到 0.36：

$ npm install --save react-native@0.36
$ react-native upgrade