如何从React Native<Image>组件获取图片源uri并传入指定函数？

解决方案 #

你不需要从<Image>组件反向提取uri，你的代码中本身就持有profileImage这个存储uri的变量，直接将它作为参数传入profileImageFilter即可。另外要注意onPress属性需要接收函数引用，直接写profileImageFilter(参数)会在组件渲染时就执行函数，而非点击后触发，因此需要套一层匿名箭头函数。

修改后的代码示例：

<TouchableOpacity onPress={() => profileImageFilter(profileImage)}>
     <Image style={styles.profileimage} source={{uri: profileImage}}></Image>
</TouchableOpacity>

特殊场景实现：必须从Image组件读取uri #

如果确实存在无法直接获取profileImage变量的场景，可以通过给Image组件绑定ref，读取其props属性获取uri，实现代码如下：

// 提前声明Image组件的ref
const imageRef = useRef(null);

// 渲染代码
<TouchableOpacity onPress={() => profileImageFilter(imageRef.current.props.source.uri)}>
     <Image ref={imageRef} style={styles.profileimage} source={{uri: profileImage}}></Image>
</TouchableOpacity>

注意：该方案属于非常规操作，优先推荐第一种直接传变量的方案，逻辑更清晰性能也更好

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