購物車頁面-ShoppingCart

• 使用ListHeaderComponent製作標頭

• 每一column 套用相同的flex 確保標頭與值是在同一欄

    const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      listItem: {
        borderWidth: 1,
        borderColor: 'black',
        flexDirection: 'row'
      },
      header: {
        flexDirection: 'row'
      },
      item: {
        fontSize: 18,
        flex: 0.3
      },
      itemTitle: {
        flex: 0.7
      },
      itemHeaderText: {
        fontSize: 32,
        textAlign: 'center'
      },
      itemText: {
        fontSize: 22,
        textAlign: 'center'
      },
      listview: {
        padding: 10,
        flex: 0
      },
      total: {
        fontSize: 30,
        alignSelf: 'flex-end'
      }
    });

    const Header = () => (
      <View style={styles.header}>
        <Text style={[styles.itemTitle, styles.itemHeaderText]}>品名</Text>
        <Text style={[styles.item, styles.itemHeaderText]}>價格與數量</Text>
      </View>
    );


    renderItem = ({ item }) => (
      <View style={styles.listItem}>
        <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.itemTitle, styles.itemText]}>
          {item.title}
        </Text>
        <View style={styles.item}>
          <Text style={[styles.itemText]}>{`NT$${item.price}`}</Text>
          <Text style={[styles.itemText]}>{`x${item.buy_count}`}</Text>
        </View>
      </View>
    );
    render(){
      return (
        <FlatList
          ListHeaderComponent={Header}
          renderItem={this.renderItem}
          data={this.state.data}
        />
      )
    }