在React Native中， 是一個非常常用的元件，特別適合用來顯示大型的列表數據。以下是如何使用它以及它常用的props介紹。

1.從 react-native import 模組

    <FlatList
      data={menu}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />

• data: 是餐點列表的數據源（如菜單數據）。
• renderItem: 定義了如何渲染每個列表項目，這裡使用的是 renderItem 函數。
• keyExtractor: 提供唯一的 key 給每個列表項目，這裡使用了 item.id。
• refreshControl: 實現了下拉刷新功能。refreshing 表示刷新狀態，onRefresh 是刷新時調用的函數。

2. 建立 renderItem 函數
   這個函數負責渲染每個列表項目的具體內容。每個項目是一個 TouchableOpacity，可以點擊後觸發 showDialog 函數。

const renderItem = ({item}) => (
  <TouchableOpacity onPress={showDialog}>
    <View style={{flex: 1, flexDirection: 'row', marginBottom: 10}}>
      {/* 餐點資訊 */}
      <View style={{flex: 0.8, marginLeft: 10, padding: 5}}>
        <Text style={{color: 'black', fontSize: 18, fontWeight: 'bold'}}>
          {item.foodName}
        </Text>
        <Text style={{color: 'gray', fontSize: 14}}>{item.description}</Text>
        <Text style={{color: 'black'}}>
          ${item.foodPrice}
          <Text
            style={{
              color: 'gray',
              paddingLeft: 5,
              marginLeft: 10,
              textDecorationLine: 'line-through',
            }}>
            {item.OriginPrice}
          </Text>
        </Text>
        {/* 底部操作區域，可以用來加其他控制按鈕 */}
        <View style={{flex: 1, flexDirection: 'row'}}>
          <View style={{flex: 0.333}}></View>
          <View style={{flex: 0.333}}></View>
          <View style={{flex: 0.333}}></View>
        </View>
      </View>

      {/* 餐點圖片及加入購物車按鈕 */}
      <View style={{flex: 0.39}}>
        <Image
          style={{
            width: 80,
            height: 80,
            resizeMode: 'cover',
            borderRadius: 15,
            margin: 5,
          }}
          source={item.foodImage === 'burger' ? burger1 : cookie}  // 根據條件顯示不同的圖片
        />
        <TouchableOpacity
          style={{
            position: 'absolute',
            right: 21,
            bottom: -10,
            margin: 5,
          }}>
          <View
            style={{
              backgroundColor: 'orange',
              width: 30,
              height: 30,
              borderRadius: 15,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: 'white', fontSize: 20}}>+</Text>   
          </View>
        </TouchableOpacity>
      </View>
    </View>

    {/* Modal：顯示選擇數量的彈出視窗 */}
    <Modal
      style={{width: '90%'}}
      animationType="slide"
      transparent={true}
      visible={isQuantityModalVisible}
      onRequestClose={() => setIsQuantityModalVisible(false)}>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          width: '90%',
        }}>
        <View
          style={{backgroundColor: 'white', padding: 20, borderRadius: 10}}>
          <Text style={{color: '#000', fontSize: 18, marginBottom: 10}}>
            選擇數量
          </Text>

          {/* 數量選擇器 */}
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <View style={{flex: 0.1, backgroundColor: 'gray'}}></View>
            <View
              style={{
                flex: 0.3,
                backgroundColor: 'orange',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 15,
              }}>
              <TouchableOpacity style={{backgroundColor: 'orange'}}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 18,
                    fontWeight: '900',
                  }}>
                  -
                </Text>
              </TouchableOpacity>
            </View>
            <View
              style={{
                flex: 0.5,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{fontWeight: '900', fontSize: 20}}>1</Text>
            </View>
            <View
              style={{
                flex: 0.3,
                backgroundColor: 'orange',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: 15,
              }}>
              <TouchableOpacity style={{backgroundColor: 'orange'}}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 18,
                    fontWeight: '900',
                  }}>
                  +
                </Text>
              </TouchableOpacity>
            </View>
            <View style={{flex: 0.1, backgroundColor: 'green'}}></View>
          </View>

          {/* 確認按鈕 */}
          <TouchableOpacity
            onPress={handleClickPostOrder}
            style={{
              marginTop: 10,
              backgroundColor: 'orange',
              padding: 10,
              borderRadius: 5,
              alignItems: 'center',
            }}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>確定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  </TouchableOpacity>
);

• TouchableOpacity: 外層的 TouchableOpacity 用來包裹整個列表項目，並在點擊時觸發 showDialog 函數。

• Image: 用來顯示餐點圖片。source 屬性根據 item.foodImage 的值來動態設定不同的圖片。(可以存取本地也可以是遠端Url)

• Modal: 彈出模態框，允許用戶選擇數量。isQuantityModalVisible 是控制模態框顯示或隱藏的狀態。

p.s. 在整理文章時，官網已聲明這個元件之後可能棄用，應該之後會替換成 Pressable

參考資源
touchableopacity