目前第一個專案已經超過一半的進度了，不過當我們的清單是空的時候，要怎麼呈現給使用者也是一個設計上的挑戰。所以今天，我們將學習如何使用 Image 來美化這個空白的畫面。

移動 assets 資料夾

為了更好地組織我們的專案結構，首先，我們將 assets 資料夾移到 src 下。要注意的是，移動後記得修正所有原先引用 assets 的路徑。

目前有用到的部分就只有 app.json，如果你自己有做更動的話要記得修正喔！

{
  "expo": {
    "name": "expoTodo",
    "slug": "expoTodo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./src/assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./src/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./src/assets/favicon.png"
    }
  }
}

Image 元件的使用

在 React Native 中，顯示圖片非常簡單。只要使用內建的 Image 元件，就可以方便地將圖片加入到畫面中，就跟在網頁上的 <img> 元素類似。

如果要使用在專案當中的圖片的話，使用方法就像這樣：

import { Image } from 'react-native'

<Image source={require('專案圖片路徑')} />

在上述的程式碼中，source 屬性指定了圖片的位置，且使用 require 來引入本地的圖片。

當然也可以連結外部的圖片：

<Image source={{uri: 'https://fakeimg.pl/300/'}} />

在 List 元件中加入 Image

當 Todo List 是空的時，將會顯示放入 assets 的圖片：

return (
  <SafeAreaView style={styles.container}>
    {todos.length > 0 ? (
      <FlatList
        data={state.todos}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    ) : (
      <View style={styles.emptyWrap}>
        <Image
          source={require('../assets/empty-list.png')}
          style={styles.emptyImage}
        />
        <Text style={styles.emptyText}>目前沒有待辦事項</Text>
      </View>
    )}
  </SafeAreaView>
)

這段程式碼首先檢查 todos 的長度。如果有待辦事項，它將渲染一個包含所有事項的 FlatList。否則，它將顯示一個帶有空列表圖片和文字的視圖。

總結

今天，我們學習了如何使用 Image 元件並成功地美化了 Todo List 空白的界面。有了這個視覺上的提示，使用者將更容易理解應用程序的當前狀態。

在下一篇文章中，我們將介紹如何實現刪除待辦事項。