mcpField
R
react-native-core

react-native-core

github.com/maikotrindade開発1350 回インストール1 日前に更新
リポジトリ

react-native-core について

JavaScriptでモバイルアプリを開発する人向けのReact Nativeリファレンススキルです。基本UI、プラットフォームAPI、アクセシビリティ、アーキテクチャと実践的な指針を扱います。

主な機能

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

活用シーン

  1. 01React NativeでモバイルUIを構築
  2. 02プラットフォーム固有のアプリ動作に対応
  3. 03一般的なUIタスク向けの基本API選定

インストール

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

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-core

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

同梱ファイル

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

references/
best-practices-debugging.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-new-architecture.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 コア

2026年時点の React Native ドキュメントに基づいています。

関連項目：

  • エコシステムライブラリ（ナビゲーション、状態管理、TanStack Query、Reanimated）→ react-native-ecosystem
  • Expo SDK と EAS ツール → react-native-expo
  • パフォーマンスの詳細な改善（FPS、バンドル、TTI、メモリ、ネイティブ）→ react-native-performance
  • React Native Testing Library の詳細 → react-native-testing

React Native を使うと、JavaScript だけでモバイルアプリを構築できます。React と同じ設計を採用しており、宣言的なコンポーネントから豊かなモバイル UI を構成できます。React Native を使えば、Objective-C や Java で構築したアプリと見分けがつかない、本格的なモバイルアプリを構築できます。

コアリファレンス

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

機能

アニメーション
トピック説明リファレンス
Animated API組み込みの Animated API — タイミング、スプリング、合成（複雑なケースには Reanimated v3 を使用）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、Platform による検出、AppState、ネイティブ連携features-platform-apis
ネットワークHTTP リクエスト用の Fetch API（本番アプリでは Axios + TanStack Query）features-network
StatusBarステータスバーの外観、スタイル、表示状態を制御features-statusbar
共有と振動ハプティックフィードバック用のネイティブ共有ダイアログとデバイスの振動features-share-vibration
タイマースケジュール設定と遅延に使用する setTimeout、setInterval、requestAnimationFramefeatures-timers
プラットフォーム固有 APIAndroid（ToastAndroid、DrawerLayoutAndroid）および iOS（ActionSheetIOS）のネイティブパターンfeatures-platform-specific
アクセシビリティ
トピック説明リファレンス
アクセシビリティスクリーンリーダーのサポート、アクセシビリティラベル、ロール、状態features-accessibility
高度なスタイリング
トピック説明参照
トランスフォーム回転、拡大縮小、移動、傾斜のための2Dおよび3Dトランスフォームfeatures-transforms
アーキテクチャ
トピック説明参照
新しいアーキテクチャFabric、JSI、TurboModules — RN 0.76以降でデフォルトになったアーキテクチャがコードに与える影響features-new-architecture
ベストプラクティス
トピック説明参照
デバッグReact Native DevTools、LogBox、Dev Menu、デバッグ手法best-practices-debugging

主な推奨事項

  • すべてのスタイルでインラインオブジェクトではなく StyleSheet.create() を使用します
  • 長いリストにはScrollViewではなく FlatListを使用します
  • 新しいタッチ操作には Pressableを使用します（非推奨のTouchableコンポーネントより推奨）
  • アニメーション：単純なケースには組み込みの Animated APIで十分です。複雑なアニメーションやジェスチャー駆動のアニメーションにはReanimated v3を使用します
  • 権限：低レベルの PermissionsAndroid ではなく、クロスプラットフォームの権限処理に react-native-permissions を使用します
  • Platform.select() と Platform.OS でプラットフォーム間の違いに対応します
  • 実機でテストします — シミュレーターの動作は実際のデバイスと異なる場合があります
  • 型安全性と開発者エクスペリエンスを向上させるために TypeScriptを使用します
  • RN 0.76以降では 新しいアーキテクチャがデフォルトです — Fabric、JSI、TurboModulesが有効になっています。ライブラリの互換性を確認してください

コメント

Markdown 対応