如何在平面列表可选项目上更改颜色

时间:2019-09-30 04:18:03

标签: react-native

在平面列表中选择项目时如何更改平面列表颜色?

我已经尝试过响应有关平面列表的本机文档,但是我对如何在我的代码中正确使用该文档有疑问

function Item({ id, title, selected, onSelect }) {
  return (
    <TouchableOpacity
      onPress={() => onSelect(id)}
      style={[
        styles.item,
        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
      ]}>
      <Text style={styles.title}>{title}</Text>
    </TouchableOpacity>
  );
}

class ApplyLeaveScreen extends Component {
const [selected, setSelected] = React.useState(new Map());
  const onSelect = React.useCallback(
    id => {
      const newSelected = new Map(selected);
      newSelected.set(id, !selected.get(id));
      setSelected(newSelected);
    },
    [selected],
  );

  render() {
    return (
      <ScrollView>
            <View style={styles.content}>
              <FlatList contentContainerStyle ={{justifyContent:'center', margin:5}}
                renderItem={({ item }) => 
                <Item id={item.id} title={item.title} 
                selected={!!selected.get(item.id)}
                onSelect={onSelect}/>}
                keyExtractor={item => item.id}
                id={item.id}
              />
          </View>
</ScrollView>          
}


0 个答案:

没有答案