March 21, 2020
この記事は React Native Tech Blog #2 で発表した内容です。
React Native の最新バージョン、0.62 がリリースされました。 マイナーバージョンのアップデートは最後に行われたのが 2019年の9月なので半年ぶりのマイナーバージョンアップとなります。
この記事では 0.62 で新しくなったことについてまとめて行きます。
0.62は主に React Native のデバッグ周辺が改善されています。その大きな要因として、Flipper のサポートがデフォルトで入るようになりました。
Flipper とは、Facebook が開発しているネイティブアプリ用のデバッグツールです。 この度、React Native でもその恩恵を受けられるようになった他、React Devtools など、React Native ならではのツールも組み込まれるようになりました。 React Devtools は新しい v4 が組み込まれているので、従来の React devtools よりもよりスッキリした見た目で使いやすくなっております。
また、Redux Inspector など、追加のプラグインもいれられるようになっています。
React Native のデバッグにはこれまで React Native Debugger というツールが主に使われていましたが、アプリが複雑になると動作がかなり重くなったりといろんな問題がありました。Flipper はアプリのパフォーマンスをほとんど損なうことなく快適にアプリのデバッグが行えるようになります。
React Native で開発している人なら誰もが一度は「赤い画面」を見たことがあると思います。
React Native 0.62 では試験的に LogBox という新しいエラーメッセージの UI を試せるようになります。
エントリーポイントである index.js
にて、unstable_enableLogBox()
を呼び出すことで新しい LogBox の UI が有効化されます。
import { unstable_enableLogBox } from 'react-native'
unstable_enableLogBox()
0.62 では端末の Appearance 設定を取得できる Appearance API が追加されました。 端末のテーマ設定に合わせて、アプリのテーマを Dark Mode や Light Mode に変更することができます。
getColorScheme
関数を呼び出すことで、端末のテーマ設定を取得できます。
import { Appearance } from 'react-native'
const LoginPage = () => {
const colorScheme = Appearance.getColorScheme()
if (colorScheme === 'dark') {
return <DarkContents />
}
return <LightContents />
}
また、午後6時からDarkModeを使う、などの特殊な状況でアプリのテーマ設定を変えたいときに、その変更を Listen するために、useColorScheme
という custom hooks も提供されています。
import { useColorScheme } from 'react-native'
const LoginPage = () => {
const colorScheme = useColorScheme()
if (colorScheme === 'dark') {
return <DarkContents />
}
return <LightContents />
}