mcpField
R
react-native

react-native

github.com/hairyf開発26215 回インストール3 週間前に更新
リポジトリ

react-native について

JavaScriptとReact風の宣言型コンポーネントでモバイルアプリを開発する人向けのReact Nativeスキルです。UIの基礎、プラットフォームAPI、アクセシビリティ、パフォーマンス、デバッグを扱います。

主な機能

  1. 01基本UIコンポーネントとFlexboxレイアウト
  2. 02StyleSheetによるスタイルとテーマ設定
  3. 03アニメーションとタッチ操作
  4. 04リストとプラットフォームAPI
  5. 05アクセシビリティとデバッグ

活用シーン

  1. 01再利用可能なコンポーネントで画面を構築
  2. 02長いリストの効率的な表示
  3. 03プラットフォーム差異とアクセシビリティへの対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hairyf/skills --skill react-native

インストール後、Claude Code で/react-nativeを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
references/
best-practices-debugging.md
best-practices-performance.md
components-ui.md
core-components.md
core-layout.md
core-styling.md
features-accessibility.md
features-animations.md
features-colors-theming.md
features-easing.md
features-keyboard.md
features-lists.md
features-network.md
features-platform-apis.md
features-platform-specific.md
features-share-vibration.md
features-statusbar.md
features-timers.md
features-touch-handling.md
features-transforms.md

詳細

React Native

このスキルは React Native に基づいており、2026-01-31 に生成されました。

React Native を使うと、JavaScript だけでモバイルアプリを構築できます。React と同じ設計を採用しているため、宣言的なコンポーネントを組み合わせて、豊かなモバイル UI を作成できます。React Native では、「モバイル Web アプリ」や「HTML5 アプリ」、「ハイブリッドアプリ」を作るわけではありません。Objective-C や Java で構築されたアプリと見分けがつかない、本物のモバイルアプリを作ります。

コアリファレンス

トピック説明リファレンス
コアコンポーネントView、Text、Image、TextInput、ScrollView など、UI を構築する基本要素core-components
Flexbox によるレイアウトコンポーネントの配置や整列に使う Flexbox レイアウトシステムcore-layout
スタイリングコンポーネントのスタイルを作成、整理する StyleSheet APIcore-styling

機能

アニメーション
トピック説明リファレンス
Animated APIAnimated.Value、timing、spring、ジェスチャー連携を使って滑らかなアニメーションを作成しますfeatures-animations
イージング関数独自のアニメーションカーブと自然な動きのためのイージング関数features-easing
ユーザー操作
トピック説明リファレンス
タッチ処理ユーザー入力を処理する Pressable、Touchable コンポーネント、ジェスチャーレスポンダーfeatures-touch-handling
キーボードキーボードイベントの処理、キーボードの非表示、KeyboardAvoidingView に使う Keyboard APIfeatures-keyboard
UI コンポーネント
トピック説明リファレンス
その他のコンポーネントダイアログ、切り替え、読み込み状態に使う Modal、Switch、ActivityIndicator、RefreshControlcomponents-ui
データ表示
トピック説明リファレンス
リスト大規模でスクロール可能なリストを効率的に描画する FlatList と SectionListfeatures-lists
スタイリングとテーマ設定
トピック説明リファレンス
色とテーマ設定テーマ設定とダークモードに対応するための Colors、PlatformColor、Appearance APIfeatures-colors-theming
プラットフォーム連携
トピック説明リファレンス
プラットフォーム APILinking、Dimensions、プラットフォームの検出、AppState、ネイティブ連携features-platform-apis
ネットワークHTTP リクエストの送信とネットワーク応答の処理に使う Fetch APIfeatures-network
StatusBarステータスバーの外観、スタイル、表示状態を制御しますfeatures-statusbar
共有とバイブレーションネイティブの共有ダイアログと、触覚フィードバックのためのデバイスのバイブレーションfeatures-share-vibration
タイマースケジュール設定や遅延処理に使う setTimeout、setInterval、requestAnimationFramefeatures-timers
プラットフォーム固有の APIAndroid（PermissionsAndroid、ToastAndroid、DrawerLayoutAndroid）および iOS（ActionSheetIOS）features-platform-specific
アクセシビリティ
トピック説明リファレンス
アクセシビリティスクリーンリーダーのサポート、アクセシビリティラベル、ロール、状態features-accessibility
高度なスタイリング
トピック説明リファレンス
変換回転、拡大縮小、移動、傾斜のための 2D および 3D 変換features-transforms
ベストプラクティス
トピック説明参照
パフォーマンスパフォーマンス最適化の手法、プロファイリング、一般的なボトルネックbest-practices-performance
デバッグデバッグツール、Dev Menu、LogBox、React Native DevTools、デバッグ手法best-practices-debugging

主な推奨事項

  • すべてのスタイルにインラインオブジェクトではなく、StyleSheet.create() を使用します
  • 長いリストには ScrollView ではなく FlatList を使用します
  • 可能な場合（transform、opacity）は、アニメーションで useNativeDriver を有効にします
  • 新しいタッチ操作には Pressable を使用します（Touchable コンポーネントより推奨）
  • Platform.select() と Platform.OS でプラットフォーム間の差異に対応します
  • 実機でテストします。シミュレーターの動作は実際のデバイスと異なる場合があります
  • 高さが固定されたアイテムには getItemLayout を使用して、リストのパフォーマンスを最適化します
  • 型安全性と開発者エクスペリエンスを向上させるため、TypeScript を使用します

コメント

Markdown 対応