在反应原生中按下图标时如何更改图标颜色？答案

【问题标题】：how to change Icon color when icon is onpressed in react native?在反应原生中按下图标时如何更改图标颜色？
【发布时间】：2019-10-10 22:18:57
【问题描述】：

我正在尝试在我的应用中创建类似的系统。

我想在我点击项目时更改心形图标颜色。

我尝试使用状态数组，当我点击 Item 时，数组元素更改是工作。

但是，我无法更改图标颜色

我检查了控制台，当渲染页面时，所有图标索引都被加载

这是我的代码

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

  const [likedMusics, setMusics] = useState([]);

 const handleLike = (musicId, index) => {
    if (!likedMusics.includes(index)) {
      likedMusics.push(index);
      axios
        .post(`${PREFIX_URL}/music/${musicId}/like`)
        .then(res => alert(res.data.message))
        .catch(err => console.log(err));
    } else {
      likedMusics.splice(likedMusics.indexOf(index), 1);
      axios
        .delete(`${PREFIX_URL}/music/${musicId}/like`)
        .then(res => alert(res.data.message))
        .catch(err => console.log(err));
    }
  };

  const likedStyle = idx => {
    console.log(idx, 'chekd1!!!!!');

    if (likedMusics.indexOf(idx) > -1) {
      console.log(idx, '@@@@@@@!!!!!');
      return 'white';
    } else {
      return 'pink';
    }
  };

...
....
return (
    <FlatList
      data={props.comments}
      keyExtractor={item => item.music.createdAt}
      renderItem={({ item, index }) => (
            <View style={{ flex: 1, justifyContent: 'center' }}>
              <Icon
                name="heart-outline"
                color={likedStyle(index)}
                size={30}
                style={styles.icon}
                onPress={() => {
                  handleLike(item.music.id, index);
                  console.log(likedMusics);
                }}
              ></Icon>
        </View>
      )}
    ></FlatList>
...

页面渲染时我在控制台中得到了什么： 0 chekd1!!!! 1 chekd1!!!! 2 切克1！！！！ 3 切克1！！！！ 4 切克1！！！！

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

在TouchableOpacity 中创建一个图标组件，并使用它的onPress 切换颜色编辑 -> 将图标View 切换为TouchableOpacity

【讨论】：