在前面的文章，我們已經建立了一個基礎的 Todo List，並且對輸入的待辦事項進行了一些優化。今天，我們將進一步擴充其功能，讓使用者能夠勾選已完成的待辦事項。

選擇 Checkbox

由於 React Native 本身不提供 Checkbox 元件，但這不代表不能使用這個功能，網路上有許多第三方提供的套件可以供我們選擇。

然而，對於使用 Expo 的開發者來說，最佳的做法通常是先從 Expo 的官方文件中查找可用的元件。好消息是，Expo 確實提供了一個 expo-checkbox 套件讓開發者使用。

首先，我們從專案中中安裝它：

$ npx expo install expo-checkbox

切換功能的加入

安裝後的首先要做的是，在 src/store/index.js 中，也就是我們 App 的主要資料狀態，加入一個新的 case：TOGGLE_ITEM。此功能的目的是翻轉特定 todo 的 checked 狀態。

case 'TOGGLE_ITEM':
  return {
    ...state,
    todos: state.todos.map((todo) =>
      todo.id === action.payload
        ? { ...todo, checked: !todo.checked }
        : todo
    )
  }

這段程式碼會將與 action.payload 匹配的 todo 的 checked 屬性翻轉，而其他的 todo 則維持不變。

在 List 中整合 Checkbox

接下來，在 List 元件中，我們引入剛安裝的 expo-checkbox，並將它整合到每一個 todo 項目中。

在 List 元件中，我們會先定義 handleToggleItem 函式，該函式將執行 TOGGLE_ITEM 動作，並傳遞所選 todo 的 ID：

const handleToggleItem = (id) => {
  dispatch({ type: 'TOGGLE_ITEM', payload: id })
}

const renderItem = ({ item }) => (
    <Item item={item} onToggleItem={() => handleToggleItem(item.id)} />
  )

我們在 Item 元件中放置了 Checkbox，當其值改變時（即被勾選或取消勾選），我們會調用 onToggleItem 函式：

const Item = ({ item, onToggleItem }) => (
  <View style={styles.item}>
    <View style={styles.checkboxAndText}>
      <Checkbox
        value={item.checked}
        onValueChange={onToggleItem}
        color={item.checked && '#1dee98'}
      />
      <Text style={[styles.itemText, item.checked && styles.finishItemText]}>
        {item.text}
      </Text>
    </View>
  </View>
)

樣式的部分：

const styles = StyleSheet.create({
  // 省略
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    marginVertical: 10
  },
  checkboxAndText: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  itemText: {
    fontSize: 18,
    fontWeight: '500',
    marginLeft: 10,
    color: '#fff'
  },
  finishItemText: {
    textDecorationLine: 'line-through'
  },
})

這樣我們就成功地將 Checkbox 功能整合到我們的 Todo List 中，現在使用者可以輕鬆地標記已完成的事項。

在下一篇文章中，我們將會介紹如何使用 Image 為空的 Todo List 加上提示作用，會有更好的使用者體驗。