android - 在 Press 上更改 FlatList 中文本项的颜色

Question

我有一个使用 FlatList 显示的类别列表，我尝试更改单个项目 OnPress 的颜色，以便用户获得他选择的项目的反馈，但 FlatList 中的所有项目都会更改颜色。

我如何继续实现这样的事情，以便唯一选定的项目改变颜色并在选择另一个项目时恢复原始颜色

这是所使用的代码示例:

import colors from "../config/colors";
function Categories() {
  return (
    <View style={styles.Categories}>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{}}
        data={category}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return <Text style={styles.Text}>{item.title}</Text>;
        }}
      />
    </View>
  );
}

Answer 1

您必须将所选项目维护在本地状态，并为每个项目设置一个所选标志，并根据要求切换样式。

const styles = StyleSheet.create({
  selectedText: {
    color: 'blue',
  },
  normalText: {
    color: 'black',
  },
});

function Categories(props) {
  const [categroy, updateCategory] = React.useState(props.category);

  const updateOnPress = (index) => {
    const categories = categroy.map((item) => {
      item.selected = false;
      return item;
    });
    categories[index].selected = true;
    updateCategory(categories);
  };

  return (
    <View style={styles.Categories}>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{}}
        data={categroy}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => {
          return (
            <TouchableOpacity onPress={() => updateOnPress(index)}>
              <Text
                style={item.selected ? styles.selectedText : styles.normalText}>
                {item.title}
              </Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

您可以使用如下所示的组件

< Categories
      category={[
        { id: 1, title: 'aa' },
        { id: 2, title: 'bb' },
        { id: 3, title: 'cc' },
      ]}
    />