react-native-basics

React Native の基本スキル

コアコンポーネント、StyleSheet、Flexbox、Expo SDK を含む、本番環境に対応した React Native の基礎を学びます。

前提条件

• JavaScript／TypeScript の基礎知識
• React の基礎（コンポーネント、props、state、フック）
• Node.js と npm／yarn がインストールされていること
• Xcode（iOS）または Android Studio（Android）

学習目標

このスキルを完了すると、次のことができるようになります。

• React Native コンポーネントを作成し、組み合わせる
• StyleSheet API を使ってスタイルを適用する
• Flexbox でレスポンシブなレイアウトを構築する
• プラットフォーム固有のコード（iOS／Android）を使用する
• 開発用に Expo をセットアップして使用する

---

対象トピック

1. コアコンポーネント

View          - Container component (like div)
Text          - Text display (required for strings)
Image         - Image rendering
ScrollView    - Scrollable container
FlatList      - Optimized list rendering
TextInput     - User input
Pressable     - Touch handling

2. スタイリングシステム

// StyleSheet.create for performance
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1a1a1a',
  },
});

3. Flexbox レイアウト

// Common patterns
flexDirection: 'row' | 'column'     // Main axis
justifyContent: 'center' | 'space-between'  // Main axis alignment
alignItems: 'center' | 'stretch'    // Cross axis alignment
flex: 1                              // Grow to fill

4. プラットフォーム固有のコード

import { Platform } from 'react-native';

// Method 1: Platform.select
const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: '#000', shadowOpacity: 0.1 },
    android: { elevation: 4 },
  }),
});

// Method 2: Platform.OS
if (Platform.OS === 'ios') {
  // iOS specific code
}

5. Expo のセットアップ

# Create new project
npx create-expo-app MyApp
cd MyApp

# Start development
npx expo start

# Build for production
eas build --platform all

---

クイックスタートの例

import React from 'react';
import { View, Text, StyleSheet, FlatList, Pressable } from 'react-native';

interface Item {
  id: string;
  title: string;
}

export default function App() {
  const [items, setItems] = React.useState<Item[]>([
    { id: '1', title: 'Learn React Native' },
    { id: '2', title: 'Build first app' },
  ]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Tasks</Text>
      <FlatList
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Pressable style={styles.item}>
            <Text>{item.title}</Text>
          </Pressable>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: '#f5f5f5' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  item: { backgroundColor: '#fff', padding: 16, marginBottom: 8, borderRadius: 8 },
});

---

よくあるエラーと解決策

エラー	原因	解決策
"Text strings must be wrapped"	<Text> の外にあるプレーンテキスト	すべてのテキストを <Text> で囲む
スタイルが適用されない	プレーンオブジェクトと StyleSheet の違い	StyleSheet.create() を使用する
FlatList がスクロールしない	高さ／flex が設定されていない	親に flex: 1 を追加する
画像が表示されない	無効なソース	URI または require パスを確認する

---

検証チェックリスト

• コンポーネントがエラーなくレンダリングされる
• 両方のプラットフォームでスタイルが正しく適用される
• FlatList が大きなリストを効率よく処理する
• プラットフォーム固有のコードが正しく動作する
• Expo のビルドが成功する

---

関連リソース

• React Native ドキュメント
• Expo ドキュメント

---

使用方法

Skill("react-native-basics")

Bonded Agent: 01-react-native-fundamentals