react-native-design

React Native Design

React Native のスタイリングパターン、React Navigation、Reanimated 3 をマスターして、ネイティブ品質のユーザー体験を備えた高性能なクロスプラットフォームモバイルアプリケーションを構築しましょう。

このスキルを使用する場面

• React Native でクロスプラットフォームモバイルアプリを構築する場合
• React Navigation 6+ でナビゲーションを実装する場合
• Reanimated 3 で高性能なアニメーションを作成する場合
• StyleSheet と styled-components でコンポーネントをスタイリングする場合
• さまざまな画面サイズに対応するレスポンシブレイアウトを構築する場合
• プラットフォーム固有のデザイン（iOS/Android）を実装する場合
• Gesture Handler でジェスチャー駆動のインタラクションを作成する場合
• React Native のパフォーマンスを最適化する場合

詳細セクション: コアコンセプト

もともとこの SKILL.md にあった 6471 バイトのセクションです。Codex のスキル本文 8 KB の上限に収めるため、references/details.md に移動しました。

クイックスタートコンポーネント

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Image,
} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

interface ItemCardProps {
  title: string;
  subtitle: string;
  imageUrl: string;
  onPress: () => void;
}

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export function ItemCard({ title, subtitle, imageUrl, onPress }: ItemCardProps) {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <AnimatedPressable
      style={[styles.card, animatedStyle]}
      onPress={onPress}
      onPressIn={() => { scale.value = withSpring(0.97); }}
      onPressOut={() => { scale.value = withSpring(1); }}
    >
      <Image source={{ uri: imageUrl }} style={styles.image} />
      <View style={styles.content}>
        <Text style={styles.title} numberOfLines={1}>
          {title}
        </Text>
        <Text style={styles.subtitle} numberOfLines={2}>
          {subtitle}
        </Text>
      </View>
    </AnimatedPressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 16,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  image: {
    width: '100%',
    height: 160,
    backgroundColor: '#f3f4f6',
  },
  content: {
    padding: 16,
    gap: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1f2937',
  },
  subtitle: {
    fontSize: 14,
    color: '#6b7280',
    lineHeight: 20,
  },
});

ベストプラクティス

1. TypeScript を使用する: 型安全性のためにナビゲーションと props の型を定義します
2. コンポーネントをメモ化する: React.memo と useCallback を使用して不要な再レンダリングを防ぎます
3. UI スレッドでアニメーションを実行する: 60fps のアニメーションには Reanimated のワークレットを使用します
4. インラインスタイルを避ける: パフォーマンスのために StyleSheet.create を使用します
5. セーフエリアを処理する: SafeAreaView または useSafeAreaInsets を使用します
6. 実機でテストする: シミュレーター/エミュレーターのパフォーマンスは実機とは異なります
7. リストには FlatList を使用する: 長いリストで ScrollView と map を決して使用しないでください
8. プラットフォーム固有のコード: iOS/Android の違いには Platform.select を使用します

よくある問題

• ジェスチャーの競合: ジェスチャーを GestureDetector でラップし、simultaneousHandlers を使用します
• ナビゲーションの型エラー: すべてのナビゲーターに ParamList 型を定義します
• アニメーションのカクつき: runOnUI ワークレットでアニメーションを UI スレッドに移動します
• メモリリーク: useEffect でアニメーションをキャンセルしクリーンアップします
• フォントの読み込み: カスタムフォントには expo-font または react-native-asset を使用します
• セーフエリアの問題: ノッチのあるデバイス（iPhone、切り欠きのある Android）でテストします