これで注文アプリの完成です。

import React, { useState } from 'react';

import {
  SafeAreaView,
  View,
  Text,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
} from 'react-native';

// 商品データをこのファイル内で管理する
const MENU = [
  {
    id: 1,
    name: 'ハンバーガー',
    price: 650,
    image: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=500',
  },
  {
    id: 2,
    name: 'チーズバーガー',
    price: 750,
    image: 'https://images.unsplash.com/photo-1572802419224-296b0aeee0d9?w=500',
  },
  {
    id: 3,
    name: 'フライドポテト',
    price: 350,
    image: 'https://images.unsplash.com/photo-1573080496219-bb080dd4f877?w=500',
  },
  {
    id: 4,
    name: 'チキンナゲット',
    price: 400,
    image: 'https://images.unsplash.com/photo-1562967916-eb82221dfb92?w=500',
  },
  {
    id: 5,
    name: 'コーラ',
    price: 250,
    image: 'https://images.unsplash.com/photo-1554866585-cd94860890b7?w=500',
  },
  {
    id: 6,
    name: 'オレンジジュース',
    price: 250,
    image: 'https://images.unsplash.com/photo-1600271886742-f049cd451bba?w=500',
  },
];

export default function App() {
  const [cart, setCart] = useState({});
  const [ordered, setOrdered] = useState(false);

  // 商品をカートに追加する
  const addToCart = (item) => {
    setCart((current) => ({
      ...current,
      [item.id]: (current[item.id] || 0) + 1,
    }));
  };

  // カートの商品を1個減らす
  const removeFromCart = (item) => {
    setCart((current) => {
      const next = { ...current };

      if (next[item.id] > 1) {
        next[item.id] -= 1;
      } else {
        delete next[item.id];
      }

      return next;
    });
  };

  // カートの商品数を計算する
  const cartCount = Object.values(cart).reduce(
    (total, count) => total + count,
    0
  );

  // カートの合計金額を計算する
  const totalPrice = MENU.reduce(
    (total, item) => total + item.price * (cart[item.id] || 0),
    0
  );

  // 注文を確定する
  const order = () => {
    if (cartCount === 0) {
      return;
    }

    setOrdered(true);
  };

  // 注文完了画面
  if (ordered) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.completeArea}>
          <Text style={styles.title}>注文完了</Text>

          <Text style={styles.message}>
            ご注文ありがとうございます。
          </Text>

          <Text style={styles.message}>
            商品の準備を開始しました。
          </Text>

          <Pressable
            style={styles.button}
            onPress={() => {
              setCart({});
              setOrdered(false);
            }}
          >
            <Text style={styles.buttonText}>
              新しい注文をする
            </Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scroll}>
        <Text style={styles.title}>注文アプリ</Text>

        <Text style={styles.sectionTitle}>メニュー</Text>

        <View style={styles.menuArea}>
          {MENU.map((item) => (
            <View key={item.id} style={styles.menuItem}>
              <Image
                source=
                style={styles.itemImage}
              />

              <View style={styles.itemInfo}>
                <Text style={styles.itemName}>
                  {item.name}
                </Text>

                <Text style={styles.price}>
                  {item.price.toLocaleString()}円
                </Text>
              </View>

              <Pressable
                style={styles.smallButton}
                onPress={() => addToCart(item)}
              >
                <Text style={styles.buttonText}>追加</Text>
              </Pressable>
            </View>
          ))}
        </View>

        <Text style={styles.sectionTitle}>カート</Text>

        {cartCount === 0 ? (
          <Text style={styles.emptyText}>
            カートは空です。
          </Text>
        ) : (
          <View style={styles.cartArea}>
            {MENU.filter((item) => cart[item.id]).map((item) => (
              <View key={item.id} style={styles.cartItem}>
                <View style={styles.itemInfo}>
                  <Text style={styles.itemName}>
                    {item.name}
                  </Text>

                  <Text style={styles.price}>
                    {item.price.toLocaleString()}円 × {cart[item.id]}
                  </Text>
                </View>

                <View style={styles.quantityArea}>
                  <Pressable
                    style={styles.quantityButton}
                    onPress={() => removeFromCart(item)}
                  >
                    <Text style={styles.buttonText}>−</Text>
                  </Pressable>

                  <Text style={styles.quantity}>
                    {cart[item.id]}
                  </Text>

                  <Pressable
                    style={styles.quantityButton}
                    onPress={() => addToCart(item)}
                  >
                    <Text style={styles.buttonText}>＋</Text>
                  </Pressable>
                </View>
              </View>
            ))}

            <View style={styles.totalArea}>
              <Text style={styles.totalLabel}>合計</Text>

              <Text style={styles.totalPrice}>
                {totalPrice.toLocaleString()}円
              </Text>
            </View>

            <Pressable
              style={styles.orderButton}
              onPress={order}
            >
              <Text style={styles.buttonText}>
                注文を確定する
              </Text>
            </Pressable>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  scroll: {
    padding: 24,
  },

  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    padding: 16,
    margin: 8,
  },

  itemImage: {
    width: 90,
    height: 90,
    margin: 8,
  },

  itemInfo: {
    flex: 1,
    padding: 8,
  },

  smallButton: {
    borderWidth: 1,
    padding: 18,
    alignItems: 'center',
  },

  cartItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    padding: 16,
  },

  quantityArea: {
    flexDirection: 'row',
  },

  quantityButton: {
    borderWidth: 1,
    padding: 14,
    alignItems: 'center',
  },

  quantity: {
    margin: 12,
  },

  totalArea: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 16,
  },

  orderButton: {
    borderWidth: 1,
    padding: 16,
    alignItems: 'center',
  },

  completeArea: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  button: {
    borderWidth: 1,
    padding: 16,
    alignItems: 'center',
  },
});

「追加」→「＋」「−」→「注文を確定する」の順に操作してみましょう。

「注文完了」と表示されれば完成です。

完成！

今回は、商品データ、画面表示、ボタン操作、カート、数量変更、合計金額、注文完了画面までを自分で作りました。

プログラムをすべて理解できなくても大丈夫です。

「ボタンを押したら画面が変わる」「データが変わると画面も変わる」という、スマートフォンアプリ開発の基本的な仕組みを体験できたことがポイントです。