react-native-components について
React Native でモバイル UI を構築・改善する開発者向けスキルです。コンポーネントのパターン、スタイル、アクセシビリティ、リストのパフォーマンスを扱います。
主な機能
- 01React Native の基本コンポーネントパターン
- 02StyleSheet と動的スタイル
- 03FlatList のパフォーマンス調整
- 04モバイル UI のアクセシビリティ
- 05モバイル向けカスタムフック
活用シーン
- 01再利用可能な UI コンポーネントの構築
- 02画面サイズに応じたレイアウト調整
- 03大規模リストの描画改善
- 04モバイル画面へのアクセシビリティ追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/react-native-componentsを入力して読み込まれたか確認します。
同梱ファイルplugin.jsonreferences/full-guide.md
詳細
React Native コンポーネントパターンのエキスパート
使用する場面
以下のような場合に使用します。
- React Native の UI コンポーネントを構築する
- StyleSheet パターンと動的スタイリングを実装する
- FlatList とリストのパフォーマンスを最適化する
- アクセシブルなモバイルインターフェースを作成する
- モバイル向けのカスタムフックを実装する
- View、Text、Image、ScrollView コンポーネントを扱う
クイックリファレンス
コアコンポーネント
- View：Flexbox コンテナー（デフォルトは
display: flex） - Text：すべてのテキストに必要なラッパー
- Image：キャッシュ性能を高めるには
expo-imageを使用します - ScrollView：内側のパディングには
contentContainerStyleを使用します - FlatList：50 件を超えるリストに使用します
StyleSheet パターン
StyleSheet.create：パフォーマンスを最適化したスタイル- 配列構文：
[baseStyle, condition && activeStyle] - 動的スタイル：レスポンシブ対応には
useWindowDimensionsを使用します - プラットフォーム：
Platform.select({ ios: {}, android: {} })
パフォーマンス
initialNumToRenderとwindowSizeを指定したFlatList- 純粋コンポーネントには
React.memo - 負荷の高い計算には
useMemo - イベントハンドラーには
useCallback
参考資料
コメント
Markdown 対応