# React Native Elements デザインシステム ## React Native Elements デザインシステムのインターフェースプレビュー タスク、所要時間、休憩の選択肢を編集し、入力検証、表示、リセットを確認します。 ## React Native Elements デザインシステムの設計リファレンス バージョンを固定したRNEUIのソース既定値、公開コンポーネントAPI、アプリケーション独自の選択を明確に区別します。 ### ライトテーマのカラー | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | lightColors.primary | #2089dc | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.secondary | #ad1457 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.background | #ffffff | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.black | #242424 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.white | #ffffff | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.grey1 | #43484d | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.grey2 | #5e6977 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.grey5 | #e1e8ee | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.success | #52c41a | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.error | #ff190c | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | lightColors.warning | #faad14 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | ### ダークテーマのカラー | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | darkColors.primary | #439ce0 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.secondary | #aa49eb | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.background | #080808 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.black | #f2f2f2 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.white | #080808 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.grey1 | #bdc6cf | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.grey2 | #86939e | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.grey5 | #393e42 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.success | #439946 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.error | #bf2c24 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | | darkColors.warning | #cfbe27 | RNEUIテーマの実際の値です。blackやwhiteなどの役割は、ダークモードでは視覚的な意味が反転します。ハードコードされた色ではなく、現在のテーマを使ってください。 | ### 既定のスペーシングとアプリケーション独自の選択 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | spacing.xs | 2 | 公開されている既定のスペーシング定義です。これらの名前はテーマオブジェクトの構成要素であり、CSSの変数トークンではありません。 | | spacing.sm | 4 | 公開されている既定のスペーシング定義です。これらの名前はテーマオブジェクトの構成要素であり、CSSの変数トークンではありません。 | | spacing.md | 8 | 公開されている既定のスペーシング定義です。これらの名前はテーマオブジェクトの構成要素であり、CSSの変数トークンではありません。 | | spacing.lg | 12 | 公開されている既定のスペーシング定義です。これらの名前はテーマオブジェクトの構成要素であり、CSSの変数トークンではありません。 | | spacing.xl | 24 | 公開されている既定のスペーシング定義です。これらの名前はテーマオブジェクトの構成要素であり、CSSの変数トークンではありません。 | | Sample heading | 32px / weight 700 | 提示されたソースで明示的に設定されたオリジナルのサンプル選択です。公式のグローバルな種類や角丸トークンとして表現されたものではありません。 | | Sample body | 15px / 23px line height | 提示されたソースで明示的に設定されたオリジナルのサンプル選択です。公式のグローバルな種類や角丸トークンとして表現されたものではありません。 | | Sample cards | 24px padding / 8px radius | 提示されたソースで明示的に設定されたオリジナルのサンプル選択です。公式のグローバルな種類や角丸トークンとして表現されたものではありません。 | | Button component default | radius: 6 | 提示されたソースで明示的に設定されたオリジナルのサンプル選択です。公式のグローバルな種類や角丸トークンとして表現されたものではありません。 | ### コンポーネントとプロバイダーの仕様 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProviderには構築したオブジェクトを渡します。変更するのがコンポーネントだけの場合は、既定値が引き続き使用されます。 | | useTheme | theme, updateTheme | 表示切り替えアクションでは、アプリケーションの状態をリセットせずにモードを変更します。 | | Input | value, onChangeText, errorMessage, ref | タスク未入力のエラーを表示し、実際の入力欄にフォーカスを戻します。 | | ButtonGroup | buttons, selectedIndex, onPress | 制御されたインデックスで15分、25分、45分を選択します。インデックス自体が所要時間を表すわけではありません。 | | Switch | value, onValueChange | 制御されたブール値によって、休憩の説明を切り替えます。 | | Card | Card.Title, Card.Divider | 構造化された界面表面は、選択したテーマを引き継ぎます。 | | Button | title, onPress, type | 保存アクションではローカルの状態を検証し、リセットすると既定値に戻ります。 | | SafeAreaProvider | Outer application provider | 連携に必要なコンテキストです。Webでの動作確認だけでは、ネイティブ端末のセーフエリアで正常に動作することは証明できません。 | ## React Native Elements デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## React Native Elements デザインシステムのランタイムとWebの対象範囲 ### テーマを適用した実際のコンポーネントを実行する > この例では、@rneui/themedと@rneui/baseの5.0.0、React 19.2.0、React Native Web 0.21.3を使います。ブラウザー向けビルドではreact-nativeをreact-native-webにエイリアスし、汎用のJavaScriptより先に.web.jsモジュールを選択します。これらはモバイル画面のスクリーンショットを模したHTMLのボックスではなく、Web向けに描画された実際のライブラリコンポーネントです。提示されたビルドファイルにはこの解決方法も含まれているため、単独のコードでプレビューを再現できます。 ### Webとネイティブの検証結果は分けて扱う この画面はフォーカスプランの編集画面であり、実行中のタイマーや通知の管理画面ではありません。連携要件に従い、アプリケーション全体をSafeAreaProviderでラップしています。ただし、このブラウザテストでは、iOSやAndroidのインセット、ネイティブのキーボード動作、デバイスの通知権限は検証しません。ネイティブプロジェクトでは、ここで示す共通コンポーネントの例に加え、プラットフォームごとのビルドとデバイスでの確認が必要です。 - Webの描画にはReact Native Webを使用します。 - プランはローカルのReact状態にのみ保持されます。 - タイマー、システム通知、バックエンドへの保存は開始されません。 ## React Native Elementsデザインシステムのテーマオブジェクトと色 ### 現在のテーマロールを使用する createThemeは、組み込みのライト／ダークカラーに明示的なオーバーライドをマージします。この例では、コンポーネントのデフォルト設定とモードのみを変更します。useThemeは解決済みの色を周囲のView要素とText要素に渡すため、大きなタイトル、説明文、パネルにも選択した外観が反映されます。ダークモードでは、blackは明るい前景色のロール、whiteは暗い表面のロールを指します。これらの名前を文字どおりの色値として扱うと、テーマが正しく機能しません。 ### 共通のタイポグラフィスケールを独自に定義しない RNEUIが提供するのは、CSSデザインシステムと同じトークンモデルではなく、コンポーネントのデフォルト設定とカスタマイズ用フックです。そのため、この例では実際のdefaultSpacingの項目と、サンプルで設定している見出しの32px、本文の15px、カードの角丸8pxを分けて説明しています。これらの寸法は、コード上で確認できる独自のレイアウト設定です。必須のReact Native Elementsブランドルールとして説明すべきではありません。 ## React Native Elementsデザインシステムの入力検証とフォーカス ### タスクのテキストを明示的に制御する InputにはvalueとonChangeTextコールバックを渡します。保存アクションでは、値の前後の空白を取り除いてから空かどうかを判定します。空の場合はerrorMessageに具体的な入力依頼を表示し、コンポーネントのrefを使って入力欄にフォーカスを戻します。テキストが変更されると、以前のエラーを消してローカルの確認状態を無効にします。これにより、編集済みのプランに古い保存メッセージが表示されるのを防ぎます。 ### ラベルとエラーを併用する 画面に表示される「フォーカスタスク」というラベルとaccessibilityLabelは、同じコントロールを示します。プレースホルダーは入力内容の例を示すものであり、ラベルの代わりにはなりません。検証は、キー入力のたびに行うのではなく、明示的な保存アクションで実行します。エラーが発生しても入力途中の内容は保持されます。また、実際には発生しないサーバーリクエストを想起させる、非同期保存のアニメーションも表示しません。 ## React Native Elementsデザインシステムの選択状態の制御 ### 選択中のインデックスと所要時間を分ける ButtonGroupには、3つのラベル、selectedIndex、onPressを渡します。返されたインデックスを使って、元の[15, 25, 45]分のリストから所要時間を選択します。インデックスをそのまま分数として渡すと、アプリケーションの不具合になります。プレビューの大きな数値も同じ選択中のインデックスから導出するため、セグメントコントロールと読みやすいプラン表示が食い違うことはありません。 ### 休憩の選択肢を真偽値として扱う SwitchにはvalueとonValueChangeを渡し、設定内容を説明するアクセシブルな名前を指定します。概要は、短い休憩を取る設定と、休憩のリマインダーを設定しない状態とで切り替わります。これはプランの設定にすぎず、インターフェースがシステムリマインダーを登録したり、通知を予約したりすることはありません。保存確認の文言でも、このローカルな機能範囲を明示します。 ## React Native Elementsデザインシステムの状態保持とリセット ### テーマをプランから独立させる 外観を変更すると、反対のモードを指定してupdateThemeを呼び出します。タスク、選択中の所要時間、休憩設定、ローカルの確認状態は、その更新とは別のアプリケーション状態として保持されます。ネイティブコンポーネントには新しいテーマが適用されますが、プランは再生成されません。ブラウザテストでは、カスタムタスクを入力した後に外観を変更し、表示モードの切り替えによってデータが誤ってリセットされないことを確認します。 ### 復元用の操作を1つ明示する 「プランをリセット」を実行すると、サンプルのタスク、25分の所要時間、休憩を有効にした状態に戻り、検証エラーと確認メッセージがクリアされます。選択中の外観は保持されます。これにより、コンテンツのリセットとテーマ設定を分離し、予期しないページ全体の再読み込みを避けられます。この例には永続化レイヤーがないため、ドキュメントを再度開くと初期サンプルから始まります。 ## React Native Elementsデザインシステムのレスポンシブなレイアウト ### 2枚のカードの配置を画面幅に合わせる useWindowDimensionsを使い、幅が700pxを超える場合は横並び、それより狭い場合は縦並びにします。各Cardの外側の余白を0にし、レイアウト全体で指定した24pxの間隔で配置を調整します。幅が500px未満の場合、外側のパディングを16pxに縮小します。2枚のカードには、編集可能なプランと、そこから導出した概要を表示します。装飾用のプレースホルダーを繰り返し並べる構成ではありません。 ### 両方のテーマでコンポーネントのデフォルト設定を確認する RNEUIのコンポーネント内部では、グローバルカラーに加えて独自のデフォルトスタイルが適用される場合があります。たとえば、この例ではButtonGroupの未選択セグメントに、標準の表面スタイルが維持されています。より高いコントラストや異なる視覚的な密度が必要な製品では、buttonStyleとselectedButtonStyleを明示的に指定できます。ただし、その判断は自動的なグローバルテーマ適用の結果とみなさず、実際にテストして確認してください。 ## React Native Elementsデザインシステムのブラウザ設定一式 ### Web向けの解決設定とアセットローダーを含める 提供されているbuild.mjsでは、esbuildのJSX解析、JavaScript依存関係の処理、react-native-webのエイリアス設定、.web.jsの優先解決、パッケージに含まれるPNGおよびTTFアセット用のデータローダーを使用します。表示上のレイアウトにアイコンがなくても、パッケージのエントリーポイントからはこれらのアセットが参照されています。そのため、処理前のソースをブラウザーから直接読み込むだけでは代用できません。 ### ローカルでの一連の操作をテストする 提供されたソースをrne.jsxとして、HTMLをindex.htmlとして保存し、バージョンが固定されたパッケージをインストールしてビルドを実行し、ディレクトリを配信します。タスクを空にした場合、カスタムタスクを入力した場合、所要時間を変更した場合、休憩スイッチを切り替えた場合、外観を変更した場合、リセットした場合をテストします。これにより、提供された画面構成を確認できます。ただし、エクスポートされるすべてのRNEUIコンポーネントや、すべてのネイティブプラットフォームが自動的に検証されるわけではありません。 1. 提供された3つのファイルを同じディレクトリに配置します。 2. バージョンが固定された依存関係をインストールし、node build.mjsを実行します。 3. 生成されたバンドルをindex.htmlとともに配信します。 4. 空欄、編集後、テーマ変更後、リセット後の状態を確認します。 ## React Native Elements デザインシステムのコンポーネント例 ### rne.jsx プロバイダー、ネイティブコンポーネント、アプリケーションの状態をまとめて確認できます。 ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing