从 FlatList onPress 更改文本项的颜色答案

【问题标题】：Changing the color of a Text item from a FlatList onPress从 FlatList onPress 更改文本项的颜色
【发布时间】：2023-03-27 03:03:01
【问题描述】：

我有一个使用 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>
  );
}

【问题讨论】：

标签： android ios reactjs react-native

【解决方案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' },
      ]}
    />

【讨论】：

【解决方案2】：


const [ selectedItem, setSelectedItem ] = useState();

const renderItem = ({ item }) => {
    return (
        <Pressable onPress={() => { setSelectedItem(item) }}>
            <View>
                <Text style={item === selectedItem ? styles.selectedText: styles.normalText}}>
    {item}</Text>
            </View>
        </Pressable>
    )
}

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

【讨论】：