React Native の v0.63.0 が 7/6 にリリースされました。
大きな変更点は以下となります。
- LogBox の導入
- Pressable Component の追加
- Native Colors の導入
- Node 8 系、iOS 9 のサポートを廃止
以下、それぞれの変更点を具体的に見ていきます。
LogBox の導入
これまでの React Native 開発では、エラーや警告メッセージの出力がわかりづらく、そこが開発しづらさにつながっていました。
例えば console.log, console.warn などで出力したメッセージを React Native の devtool 経由でしか確認できないなどの問題がありました。
LogBox はそのような開発者の声を受けて、開発しやすいログメッセージの出力 UI を提供するインタフェースとして新たに開発されたもののようです。
LogBox によって、以下のような変更がもたらされます:
-
console.xxxで出力されるメッセージの出力- これまでブラウザの devtool や logcat (Android) などで確認しなければならなかった
console.log, console.warn, console.errorなどの出力を直接アプリケーションから確認できるようになりました。
- これまでブラウザの devtool や logcat (Android) などで確認しなければならなかった
- コードフレームの出力
- エラーや警告にアプリケーション内のログのソースコードを表示するコードフレームが含まれるようになりました。
- コンポーネントスタック
- これまで出力されていたコンポーネントスタックがエラーメッセージからは削除され、独自のセクションに配置されるようになりました。 これにより、ログメッセージをコンポーネントスタックフレームとそうでないもので切り分けて見ることができるようになります。
- スタックフレームの省略
- アプリケーションのコードに関連しない (= React Native のコア部分の) コールスタックのフレームが省略されるようになりました。これにより、React Native 内部のエラー出力を覗くことがなくなり、開発しているアプリケーションのエラー箇所を解りやすく追うことができるようになりました。
Pressable Component の追加
React Native では、押下が可能な UI パーツとして、 Button や TouchableOpacity などのコンポーネントを利用することがデフォルトで推奨されています。
ただ、これらのコンポーネントはデフォルトの UX (ホバー、ブラー、フォーカス)などが既定されており、カスタマイズが難しいという問題がありました。
Pressable は、これらの問題を解決するために新たに提供されるコンポーネントです。
このコンポーネントは、Button や TouchableOpacity よりも抽象的なコンポーネントで、さまざまなインタラクションを検知し、またその状態を保持・取得できるものです。
これによって、押下されているときのスタイル などを独自に定義しやすくなりました。
<Pressable
onPress={() => {
// 押された回数を更新する
setTimesPressed((current) => current + 1);
}}
style={({ pressed }) => [
{/* 押されたときとそうでないときで色を変更する */
backgroundColor: pressed
? 'rgb(210, 230, 255)'
: 'white'
}
]}>
/* 押されたときとそうでないときで内部テキストを変更する */
{({ pressed }) => (
<Text style={styles.text}>
{pressed ? `Pressed (${current} times)` : 'Press Me'}
</Text>
)}
</Pressable>
公式ドキュメント も用意されています。
Native Colors (PlatformColor, DynamicColorIOS) の導入
PlatformColor はネイティブレベルで定義している色定義を呼び出して利用できる機能となります。
例えば iOS だと labelColor など UIKit の UIColor でビルトインで定義されている色 を呼び出すことができます。
import { Text, PlatformColor } from 'react-native';
// ビルトイン定義の labelColor 色のテキストをレンダリングする
<Text style={{ color: PlatformColor('labelColor') }}>
This is a label
</Text>;
DynamicColorIOS は、iOS のビルトインで定義している色の動的な変更 (ダークモードとライトモードの切り替え)に対応しています。
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue'
});
Node 8 系、iOS 9 のサポートを廃止
昨年秋、Node 8 系は LTS バージョンから落とされました (現在 Node 10系 が LTS となっています)
その関係で、React Native でも Node 8 系はのサポート外となりました。
iOS 9 に関しては、シェア率が 1% 以下となったこともあり、サポートにかかるコストを考慮して、今後サポートしないことになったようです。
これによって、 React Native 内部の iOS の互換性を担保するコードのメンテナンスコストが減り、見通しがよくなったようです。
Top comments (0)