React Native 常用元件入門：View、Text、Image、FlatList、Pressable

這是「接下來可以學什麼」系列的第三篇。這五個元件是你寫畫面時，會用到最頻繁的「基本積木」，先把它們搞懂，之後拼畫面會快很多。

---

一、先建立一個概念：元件就是「積木」

React Native 不像寫網頁可以用 <div>、<p>、<img> 這些 HTML 標籤，而是有自己專屬的一套元件。

你可以把這篇要介紹的五個元件，想成蓋房子常用的五種積木：

元件	對應的角色
View	容器，用來放其他東西、排版用
Text	顯示文字
Image	顯示圖片
FlatList	顯示一長串清單（例如貼文列表、商品列表）
Pressable	讓使用者「可以點擊」的區域

接下來一個一個拆解。

---

二、View：畫面的容器

View 就是一個「空白的盒子」，本身不會顯示任何內容，但可以用來：

• 把其他元件包起來，方便一起排版。
• 設定背景顏色、邊框、間距等樣式。

import { View, Text } from 'react-native';

export default function Card() {
  return (
    <View style={{ padding: 16, backgroundColor: '#f2f2f2', borderRadius: 8 }}>
      <Text>這是一張卡片裡的文字</Text>
    </View>
  );
}

重點記住

• View 預設使用 Flexbox 排版（跟網頁的 CSS Flexbox 概念很接近）。
• 最常用的排版屬性：
  • flexDirection：子元件要「橫向排列」(row) 還是「直向排列」(column，預設值)。
  • justifyContent：主軸方向的對齊方式（例如置中、平均分散）。
  • alignItems：垂直於主軸方向的對齊方式。

<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
  <Text>左邊文字</Text>
  <Text>右邊文字</Text>
</View>

---

三、Text：顯示文字

在 React Native 裡，所有文字都一定要包在 Text 裡面，不能像網頁那樣直接把文字寫在 View 裡面，這是新手很容易犯的錯誤。

import { Text } from 'react-native';

<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#333' }}>
  你好，歡迎使用這個 App！
</Text>

重點記住

• ❌ 錯誤寫法：<View>你好</View>（文字沒有包在 Text 裡，會直接報錯）
• ✅ 正確寫法：<View><Text>你好</Text></View>
• Text 可以互相巢狀使用，做出「部分文字不同樣式」的效果：

<Text>
  一般文字，
  <Text style={{ fontWeight: 'bold', color: 'red' }}>這段是粗體紅字</Text>
  ，後面接著一般文字。
</Text>

---

四、Image：顯示圖片

Image 用來顯示圖片，可以顯示本地圖片（放在專案資料夾裡）或網路圖片（透過網址）。

顯示本地圖片

import { Image } from 'react-native';

<Image
  source={require('../assets/logo.png')}
  style={{ width: 100, height: 100 }}
/>

顯示網路圖片

<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200 }}
/>

重點記住

• Image 一定要明確指定寬高（width、height），否則預設可能不會顯示出來。
• 本地圖片用 require()，網路圖片用 { uri: '網址' }，這兩種寫法不要搞混。
• 想讓圖片照比例縮放、裁切方式不同，可以用 resizeMode 屬性，例如 resizeMode="cover"（鋪滿、可能裁切）或 "contain"（完整顯示、可能留白）。

---

五、FlatList：顯示一長串清單，效能更好

如果你要顯示「一筆一筆很多項目」的內容，例如貼文列表、商品列表、聊天訊息，不要直接用 View 加迴圈把所有項目都畫出來，而是要用 FlatList。

為什麼不能只用迴圈 + View？

如果清單項目很多（例如 1000 筆），用一般迴圈會把全部 1000 個項目都畫出來，即使使用者只看到畫面上的 8 筆，這樣會非常耗效能、畫面容易卡頓。

FlatList 的厲害之處在於：它只會畫出畫面上看得到（加上附近一點點）的項目，使用者往下滑，才會動態畫出更多項目、同時把已經滑出畫面的項目回收掉。這個機制叫做「虛擬化（Virtualization）」。

基本用法

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

const data = [
  { id: '1', title: '第一篇貼文' },
  { id: '2', title: '第二篇貼文' },
  { id: '3', title: '第三篇貼文' },
];

export default function PostList() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}

三個必須認識的屬性

• data：要顯示的資料陣列。
• renderItem：每一筆資料要怎麼畫出來，會拿到 { item } 這個參數，代表目前這一筆資料。
• keyExtractor：幫每一筆資料找出一個獨一無二的識別碼（通常用資料庫的 id）。這個很重要，沒設定好，畫面更新時容易出現奇怪的閃爍或錯位問題。

想效能更好，可以額外注意這些（進階，先有印象就好）

• 盡量讓 keyExtractor 回傳真正穩定、唯一的值，不要用陣列的 index 當 key（資料順序改變時容易出錯）。
• 如果項目高度是固定的，可以搭配 getItemLayout 屬性，讓 FlatList 不用每次都重新計算項目高度，捲動會更滑順。
• 把 renderItem 裡用到的子元件，搭配 React.memo 包起來，避免不必要的重複渲染。

新手現階段不用急著把這些進階技巧全部記住，先把基本的 data / renderItem / keyExtractor 用熟，之後遇到效能問題再回來補強即可。

---

六、Pressable：讓畫面可以被點擊

Pressable 是目前官方建議的「可點擊區域」元件，可以把任何東西包起來，變成「使用者可以按一下」的按鈕。

import { Pressable, Text } from 'react-native';

export default function LikeButton() {
  return (
    <Pressable
      onPress={() => console.log('被點擊了！')}
      style={({ pressed }) => ({
        padding: 12,
        backgroundColor: pressed ? '#ddd' : '#fff',
        borderRadius: 8,
      })}
    >
      <Text>❤️ 喜歡</Text>
    </Pressable>
  );
}

重點記住

• onPress：使用者點擊時要執行的函式，這是最重要的屬性。
• style 可以傳入一個函式，拿到 pressed（目前是不是正在被按著）這個狀態，讓你做出「按下去顏色變深」這種互動回饋，使用者體驗會更好。
• Pressable 幾乎可以包住任何東西：文字、圖片、整個卡片都可以變成可點擊區域。

---

七、把五個元件組合在一起：一個小範例

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

const posts = [
  { id: '1', title: '今天天氣真好', likes: 12 },
  { id: '2', title: '分享一張風景照', likes: 34 },
];

export default function Feed() {
  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#eee' }}>
          <Image
            source={{ uri: 'https://example.com/avatar.jpg' }}
            style={{ width: 40, height: 40, borderRadius: 20, marginBottom: 8 }}
          />
          <Text style={{ fontSize: 16 }}>{item.title}</Text>
          <Pressable onPress={() => console.log('喜歡了貼文', item.id)}>
            <Text style={{ color: '#1d9bf0', marginTop: 8 }}>
              ❤️ {item.likes} 個喜歡
            </Text>
          </Pressable>
        </View>
      )}
    />
  );
}

這個範例同時用到了五個元件：FlatList 顯示清單、View 排版每一筆貼文、Image 顯示頭貼、Text 顯示文字、Pressable 做出可以點擊的「喜歡」按鈕。這幾乎就是大部分社群類 App 動態牆的基本骨架。

---

八、新手常見錯誤整理

• ❌ 文字沒包在 Text 裡面直接寫在 View 裡 → 會直接報錯。
• ❌ Image 沒設定 width / height → 圖片可能完全不顯示。
• ❌ 清單資料很多，卻直接用 View + 迴圈畫出來，沒用 FlatList → 畫面卡頓、捲動不順。
• ❌ FlatList 的 keyExtractor 用陣列 index 當 key → 資料更新時容易出現錯位或閃爍。
• ❌ 用舊版的 TouchableOpacity 系列元件，其實官方目前建議優先使用 Pressable，因為它的功能更完整、彈性更高。

---

九、小結

• View 是排版容器，Text 是文字一定要用的元件，Image 顯示圖片要記得設定寬高。
• 清單一律用 FlatList，不要自己用迴圈畫一長串 View，效能差很多。
• 點擊互動用 Pressable，可以拿到 pressed 狀態做按壓回饋。

把這篇的小範例自己敲一次、套上真實一點的假資料（例如多寫幾筆貼文），會比單純看文字更有感覺。下一篇，我們會接著介紹怎麼用 fetch 串接 API，把真正的資料抓回來顯示在畫面上。