本日、LogBoxがデフォルトでオンになっているReact Native 0.63をリリースします。
LogBox
React Nativeでは、エラーと警告のデバッグが難しいというコミュニティからのフィードバックを頻繁に受けてきました。これらの問題に対処するために、React Nativeのエラー、警告、ログシステム全体を検討し、ゼロから設計し直しました。
LogBoxは、React Nativeで完全に再設計されたredbox、yellowbox、およびロギングエクスペリエンスです。0.62では、LogBoxをオプトインとして導入しました。このリリースでは、すべてのReact NativeでLogBoxをデフォルトのエクスペリエンスとして開始します。
LogBoxは、エラーと警告があまりにも冗長である、書式が不適切である、または実行不可能であるという不満に対処するために、3つの主要な目標に焦点を当てています。
- 簡潔：ログは、問題をデバッグするために必要な最小限の情報を提供する必要があります。
- 書式設定：ログは、必要な情報をすばやく見つけることができるように書式設定する必要があります。
- 実行可能：ログは実行可能である必要があるため、問題を修正して先に進むことができます。
これらの目標を達成するために、LogBoxには以下が含まれています。
- ログ通知：警告通知を再設計し、エラーのサポートを追加しました。そのため、すべてのconsole.warnとconsole.logメッセージは、アプリを覆うのではなく、通知として表示されます。
- コードフレーム：すべてのエラーと警告には、アプリ内でログのソースコードを表示するコードフレームが含まれるようになりました。これにより、問題の発生源をすばやく特定できます。
- コンポーネントスタック：すべてのコンポーネントスタックは、エラーメッセージから削除され、上位3つのフレームが表示された独自のセクションに配置されるようになりました。これにより、ログメッセージを混乱させることなく、スタックフレーム情報の期待できる一貫性のある単一のスペースが提供されます。
- スタックフレームの折りたたみ：デフォルトでは、アプリケーションコードに関連しないコールスタックフレームが折りたたまれるようになりました。これにより、アプリの問題をすばやく確認し、React Nativeの内側を調べる必要がなくなります。
- 構文エラーの書式設定：構文エラーの書式設定を改善し、構文強調表示付きのコードフレームを追加しました。これにより、エラーの原因を確認し、修正して、React Nativeが邪魔になることなくコーディングを続けることができます。
これらの機能はすべて、エラーと警告間で一貫性があり、1つの使いやすいUIですべてのログをページングできる、改善された視覚デザインにまとめられています。
この変更により、YellowBoxはLogBox APIに置き換えられます。
LogBox.ignoreLogs()：この関数は、YellowBox.ignoreLogs([])を置き換え、指定された文字列または正規表現に一致するログをサイレントにする方法です。LogBox.ignoreAllLogs()：この関数は、console.disableYellowBoxを置き換え、エラーまたは警告通知をオフにする方法です。注：これは通知のみを無効にします。キャッチされていないエラーは、引き続きフルスクリーンのLogBoxを開きます。
0.63では、これらの非推奨のモジュールまたはメソッドを使用している場合に警告が表示されます。0.64で削除される前に、これらのAPIからの呼び出しサイトを更新してください。
LogBoxとReact Nativeのデバッグの詳細については、こちらのドキュメントを参照してください。
Pressable
React Nativeは、アプリケーションがユーザーのプラットフォームへの期待に応えられるように構築されています。「手がかり」—React Nativeを使用してエクスペリエンスが構築されたことを示す小さなもの—を回避することを含みます。これらの手がかりの主な原因の1つは、Touchableコンポーネント（Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback、TouchableBounce）でした。これらのコンポーネントを使用すると、ユーザーインタラクションへの視覚的なフィードバックを提供できるため、アプリケーションをインタラクティブにすることができます。しかし、プラットフォームのインタラクションと一致しない組み込みのスタイルとエフェクトが含まれているため、ユーザーはエクスペリエンスがReact Nativeで記述されていることを知ることができます。
さらに、React Nativeが成長し、高品質なアプリケーションに対する基準が高まるにつれて、これらのコンポーネントは成長していません。React Nativeは現在、Web、デスクトップ、TVなどのプラットフォームをサポートしていますが、追加の入力モダリティのサポートが不足していました。React Nativeは、すべてのプラットフォームで高品質なインタラクションエクスペリエンスをサポートする必要があります。
これらの問題に対処するために、Pressableという新しいコアコンポーネントを提供しています。このコンポーネントを使用して、さまざまな種類のインタラクションを検出できます。APIは、親コンポーネントで手動で状態を維持する必要なく、インタラクションの現在の状態に直接アクセスできるように設計されています。また、ホバー、ブラー、フォーカスなどを含む機能を拡張できるように設計されています。ほとんどの人は、TouchableOpacityなどのデフォルトのエクスペリエンスに依存するのではなく、内部でPressableを利用したコンポーネントを作成して共有すると予想されます。
import {Pressable, Text} from 'react-native';
<Pressable
onPress={() => {
console.log('pressed');
}}
style={({pressed}) => ({
backgroundColor: pressed ? 'lightskyblue' : 'white',
})}>
<Text style={styles.text}>Press Me!</Text>
</Pressable>;
動作中のPressableコンポーネントの簡単な例
ドキュメントで詳細を確認できます。
すべてのネイティブプラットフォームには、システム定義の色という概念があります。ライトモードやダークモードなどのシステムテーマ設定、高コントラストモードなどのアクセシビリティ設定、さらにはコンテナービューやウィンドウの特性などのアプリ内コンテキストに自動的に対応する色です。
Appearance APIやAccessibilityInfoを介してこれらの設定の一部を検出し、それに応じてスタイルを設定することは可能ですが、そのような抽象化は開発コストが高いだけでなく、ネイティブカラーの外観を近似しているに過ぎません。これらの不一致は、React Native要素がネイティブ要素と共存するハイブリッドアプリケーションで作業する場合に特に顕著です。
React Nativeは現在、これらのシステムカラーを使用するためのすぐに使えるソリューションを提供しています。PlatformColor()は、React Nativeの他のカラーのように使用できる新しいAPIです。
たとえば、iOSでは、システムはlabelColorと呼ばれる色を提供しています。これは、次のようにPlatformColorを使用してReact Nativeで使用できます。
import {Text, PlatformColor} from 'react-native';
<Text style={{color: PlatformColor('labelColor')}}>
This is a label
</Text>;
iOSで定義されているように、Textコンポーネントの色をlabelColorに設定します。
一方、AndroidはcolorButtonNormalなどの色を提供しています。これは、次のようにReact Nativeで使用できます。
import {View, Text, PlatformColor} from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal'),
}}>
<Text>This is colored like a button!</Text>
</View>;
Androidで定義されているように、Viewコンポーネントの背景色をcolorButtonNormalに設定します。
ドキュメントでPlatformColorの詳細を確認できます。また、RNTesterにある実際のコード例も確認できます。
DynamicColorIOSは、iOS専用のAPIで、ライトモードとダークモードで使用する色を定義できます。PlatformColorと同様に、これは色が使用できる場所であればどこでも使用できます。DynamicColorIOSは、内部でiOSのcolorWithDynamicProviderを使用します。
import {Text, DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});
<Text style={{color: customDynamicTextColor}}>
This color changes automatically based on the system theme!
</Text>;
システムテーマに基づいてテキストの色を変更します。
ドキュメントでDynamicColorIOSの詳細を確認できます。
iOS 9とNode.js 8のサポートの削除
リリースから4年以上経過したため、iOS 9のサポートを削除します。この変更により、特定のiOSバージョンで特定の機能がサポートされているかどうかを検出するためにネイティブコードに配置する必要がある互換性チェックの数を減らすことができるため、より迅速に作業を進めることができます。市場シェアが1％であるため、お客様への悪影響はほとんどありません。
同時に、Node 8 のサポートを終了します。その LTS メンテナンスサイクルは2019年12月に終了しました。現在の LTS は Node 10 であり、これが現在私たちがターゲットとしているバージョンです。React Native アプリケーションの開発に Node 8 を引き続き使用している場合は、最新のセキュリティ修正とアップデートを受け取るためにアップグレードすることをお勧めします。
その他の重要な改善点
<View />を明示的なサイズなしで<Text />内にレンダリングするサポート: 幅と高さを明示的に設定せずに、任意の<View />を任意の<Text />コンポーネント内でレンダリングできるようになりました。以前のバージョンのReact Nativeでは、これによりRedBoxが表示されていました。- iOS LaunchScreenを
xibからstoryboardに変更: 2020年4月30日以降、App Storeに提出されるすべてのアプリは、アプリの起動画面にXcode storyboardを使用する必要があり、すべてのiPhoneアプリはすべてのiPhone画面をサポートする必要があります。このコミットにより、デフォルトのReact Nativeテンプレートがこの要件と互換性を持つように調整されています。
0.63 を実現するために尽力してくれた数百人のコントリビューターに感謝します！
LogBoxに関するセクションの作成に貢献してくれたRick Hanlonさん、この記事のPressable部分の作成に貢献してくれたEli Whiteさんに特別な感謝を申し上げます。
すべての更新を確認するには、0.63 の変更ログをご覧ください。
