Изменение цвета текстового элемента из FlatList на Press

Question

У меня есть список категорий, который отображается с помощью FlatList. Я попытался изменить цвет одного элемента OnPress, чтобы пользователь получил обратную связь о том, какой элемент он выбрал, но все элементы в FlatList меняют цвет.

Как мне go реализовать что-то подобное, чтобы единственный выбранный элемент менял цвет и возвращал исходный цвет, когда выбирается другой элемент

Вот пример используемого кода:

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' },
      ]}
    />