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

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