在React Native中按下图标时如何更改图标颜色？

Question

我正在尝试在我的应用中制作类似的系统。

我想在单击心脏图标颜色将更改的项目时做出。

我尝试使用状态数组，当我点击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 chekd1 !!!!! 3 chekd1 !!!!! 4 chekd1 !!!!!

Answer 1

在TouchableOpacity内创建一个Icon组件，并使用其onPress切换颜色 编辑->将图标View切换到TouchableOpacity