Day 17 To Do List - 切版 2

第 17 天！

昨天我们建立了， To Do List 专案

这是我们预期的画面，

昨天做到

今天我们来完成最後下面的代办事项列表

这代办事项必须要有两种状态显示，

not done
done

在 react-native ，

我们要建立列表，用的是 react-native 提供的 FlatList component，它可以让我们把指定的资料显示成列表

FlatList

data

列表的原始阵列资料

renderItem

指定列表显示的项目是哪一个 component，

会有三个变数透过 props 传递下来，

item：该项目的资料
index：第几个项目
separators: 提供操控 separator component 的 function
- highlight
- unhighlight
- updateProps

updateProps

这比较特别，它是 function ，

作用是更新指定分隔线的参数，

有两个参数

select: leading & trailing 两个选项
props: 欲额外带入分隔线的值

separators.updateProps('leading' | 'trailing', props);

假如 select 带入是 leading，以触发项目来判断，更新上方有分隔线的

反之，带入 trailing 则会更新下方的分隔线的部份

ItemSeparatorComponent

客制化项目分隔符号，没设定的话就是无显示

会有两个变数透过 props 传递下来，

highlighted: boolean 值
leadingItem: 分隔线上方的项目参数
updateProps 额外带入的值

keyExtractor

以项目资料指定列表的 key 值

那 list 的结构大概是这样

const list = [
  { id: 1, text: 'to do 1' },
  { id: 2, text: 'to do 2' },
  { id: 3, text: 'to do 3' },
];

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    return (
      <TouchableOpacity>
        <View></View>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>;

那一样，我们先看看没有样式的画面如何

嗯.. 这真的很乾净，

我们需要设定一些样式，

{
  item: {},
  itemEven:{},
  itemOdd:{},
  itemText: {},
  tickArea: {},
  tick: {},
}

带入结构中会是这样

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    return (
      <TouchableOpacity style={[styles.item]}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

样式加入後，

因为列表是有两个颜色，并且用奇偶数区分，

我们用 index % 2 === 0 来判断，
最後给予哪个 style

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, styles.itemDone]}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

那这是一般画面：