メインコンテンツへスキップ

0.36: Headless JS、Keyboard API、その他

·3分で読めます
Héctor Ramos
Héctor Ramos
元Facebook デベロッパーアドボケイト

本日、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のドキュメントをご覧ください！

Keyboard API​

オンスクリーンキーボードの操作がKeyboardでより簡単になりました。ネイティブのキーボードイベントをリッスンして、それらに反応できるようになりました。たとえば、アクティブなキーボードを閉じるには、単にKeyboard.dismiss()を呼び出すだけです。

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

アニメーションによる除算​

2つのアニメーション値を加算、乗算、モジュロで結合することは、すでにReact Nativeでサポートされています。バージョン0.36では、除算によって2つのアニメーション値を結合することが可能になりました。アニメーション値が計算のために他のアニメーション値を反転する必要があるケースがあります。例としては、スケールを反転させること（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>

この例では、親の拡大・縮小が相殺されるため、内側の画像はまったく引き伸ばされません。さらに詳しく知りたい場合は、アニメーションガイドをご覧ください。

ダークステータスバー​

新しいbarStyle値がStatusBarに追加されました：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