本日、LogBoxをデフォルトで有効にしたReact Native 0.63をリリースします。
LogBox
React Native ではエラーや警告のデバッグが難しいというフィードバックをコミュニティから頻繁に耳にしていました。これらの問題に対処するため、React Native のエラー、警告、ログシステム全体を見直し、ゼロから再設計しました。
LogBoxは、React Nativeにおけるredbox、yellowbox、そしてロギング体験を完全に再設計したものです。0.62ではLogBoxをオプトインとして導入しました。このリリースでは、LogBoxをReact Native全体のデフォルト体験としてローンチします。
LogBoxは、エラーや警告が冗長すぎる、フォーマットが悪い、またはアクションにつながりにくいという不満に対処するため、主に3つの目標に焦点を当てています。
- 簡潔であること（Concise）: ログは問題をデバッグするために必要な最小限の情報を提供するべきです。
- 整形されていること（Formatted）: ログは必要な情報をすぐに見つけられるように整形されるべきです。
- 実行可能であること（Actionable）: ログはアクション可能であるべきで、それによって問題を修正して先に進むことができます。
これらの目標を達成するために、LogBoxには以下の機能が含まれています。
- ログ通知: 警告通知を再設計し、エラーのサポートも追加しました。これにより、すべてのconsole.warnとconsole.logメッセージがアプリを覆い隠すのではなく、通知として表示されるようになります。
- コードフレーム: すべてのエラーと警告に、アプリ内で直接ログのソースコードを表示するコードフレームが含まれるようになりました。これにより、問題の原因を迅速に特定できます。
- コンポーネントスタック: すべてのコンポーネントスタックはエラーメッセージから削除され、先頭の 3 つのフレームが見える独自のセクションに配置されます。これにより、ログメッセージを cluttered (散らかす) ことなく、スタックフレーム情報を期待できる一貫した単一のスペースが提供されます。
- スタックフレームの折りたたみ: デフォルトで、アプリケーションのコードに関係のないコールスタックフレームを折りたたむようになりました。これにより、React Nativeの内部を छानったりせず、アプリ内の問題を迅速に確認できます。
- 構文エラーのフォーマット: 構文エラーのフォーマットを改善し、シンタックスハイライト付きのコードフレームを追加しました。これにより、エラーの原因を確認し、修正して、React Nativeに邪魔されることなくコーディングを続けることができます。
これらのすべての機能を、エラーと警告で一貫性があり、すべてのログを快適なUIでページングできる、改善されたビジュアルデザインにまとめました。
この変更に伴い、YellowBoxは非推奨となり、LogBox APIに置き換えられます。
LogBox.ignoreLogs(): この関数はYellowBox.ignoreLogs([])を置き換えるもので、指定された文字列または正規表現に一致するログを非表示にする方法です。LogBox.ignoreAllLogs(): この関数はconsole.disableYellowBoxを置き換えるもので、エラーや警告の通知をオフにする方法です。注意：これは通知を無効にするだけで、キャッチされなかったエラーは引き続きフルスクリーンのLogBoxを開きます。
0.63では、これらの非推奨のモジュールやメソッドを使用すると警告が表示されます。0.64で削除される前に、これらのAPIの呼び出し箇所を更新してください。
LogBoxとReact Nativeのデバッグに関する詳細については、こちらのドキュメントを参照してください。
Pressable
React Native は、アプリケーションがプラットフォームのユーザーの期待に応えることを可能にするように構築されています。これには、「tell」（そのエクスペリエンスが React Native で構築されたことを示す小さなもの）を避けることが含まれます。これらの tell の主要な原因の 1 つは、Button、TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity、TouchableNativeFeedback、TouchableBounce などの Touchable コンポーネントでした。これらのコンポーネントは、ユーザーインタラクションに視覚的なフィードバックを提供できるようにすることで、アプリケーションをインタラクティブにします。しかし、プラットフォームのインタラクションと一致しない組み込みのスタイルと効果が含まれているため、ユーザーはエクスペリエンスが 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 と呼ばれる色を提供します。これは、React Native で PlatformColor を使用して次のように使用できます。
import {Text, PlatformColor} from 'react-native';
<Text style={{color: PlatformColor('labelColor')}}>
This is a label
</Text>;
Textコンポーネントの色をiOSで定義された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>;
Viewコンポーネントの背景色をAndroidで定義された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 を使用している場合は、最新のセキュリティ修正と更新をすべて受け取るためにアップグレードすることをお勧めします。
その他の注目すべき改善点
- 明示的なサイズなしで
<Text /> 内に <View /> をレンダリングするサポート: これまで常に可能だったわけではありませんが、幅と高さを明示的に設定せずに、任意の <Text /> コンポーネント内に任意の <View /> をレンダリングできるようになりました。以前の React Native のリリースでは、これにより RedBox が発生していました。
- iOS LaunchScreen を
xib から storyboard に変更: 2020 年 4 月 30 日以降、App Store に提出されるすべてのアプリは、アプリの起動画面を提供するために Xcode のストーリーボードを使用する必要があり、すべての iPhone アプリはすべての iPhone 画面をサポートする必要があります。このコミットは、この要件と互換性があるようにデフォルトの React Native テンプレートを調整します。
0.63を可能にしてくれた何百人ものコントリビューターに感謝します！
すべてのアップデートを確認するには、0.63の変更履歴をご覧ください。
