React Native无e.target对象时如何通过onPress修改Image的source属性

React Native 是声明式UI框架，所有视图渲染由状态驱动，不存在Web中的DOM元素操作逻辑，也无法通过事件对象直接修改组件属性，你需要通过修改数据源状态触发重渲染来实现需求，另外注意两个原生语法问题：

• RN 原生 Image 组件不支持 onPress 事件，需要嵌套在 Pressable/TouchableOpacity 等可点击容器内使用
• 你导入的 images 是静态常量，修改后不会触发组件重渲染，需要先转存为组件的响应式状态

完整修改后的业务代码如下：

import { useState } from 'react'
import { ScrollView, Image, Pressable } from 'react-native'
// 导入静态数据源
import staticImages from './store.js'

export default function ImageList() {
  // 将静态数组转为响应式状态，修改时自动触发重渲染
  const [images, setImages] = useState(staticImages)

  // 点赞状态切换方法，接收当前点击项的索引作为入参
  const toggleLike = (index) => {
    setImages(prevList => {
      // 拷贝原数组避免直接修改状态
      const newList = [...prevList]
      // 翻转对应项的点赞状态
      newList[index].liked = !newList[index].liked
      return newList
    })
  }

  return (
    <ScrollView>
      {images.map((item, index) => (
        // 绑定当前项索引，点击时传入切换方法
        <Pressable key={index} onPress={() => toggleLike(index)}>
          <Image
            source={item.liked ? require('../assets/liked.png') : require('../assets/unliked.png')}
            // 按需调整图片样式
            style={{ width: 40, height: 40, margin: 10 }}
          />
        </Pressable>
      ))}
    </ScrollView>
  )
}

实现逻辑说明：点击可点击容器时，会把当前点击项的索引传给切换方法，修改对应项的liked状态后会触发组件重渲染，map循环时会自动根据最新的liked值加载对应图片资源。如果你的列表会有动态增删操作，建议给store数组的每一项增加唯一id，代替index作为列表项的key值，避免渲染异常。

内容的提问来源于stack exchange，提问作者Tuzi