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

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

Animated Division​

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