在 React Native 中更新图像

Question

所以我现在在 Google 和 Stackoverflow 中查找了大约一个 hout，但我找不到解决我的问题的方法：我有一个带有存储在 var like_uri中的内部源的图像。 现在图像显示正常并且可以正常工作。 我用包括onPress()的<TouchableOpacity>包裹它。 每次用户点击这张图片时，它都应该通过更新源变量like_uri来更新它。 我的想法如下所示：

 var like_uri = require('../pictures/sections/hearth_empty.png'); const pressLike = () => { like_uri = require('../pictures/sections/hearth_full.png'); }... <TouchableOpacity onPress={pressLike}> <Image source={like_uri} style={{height: 28, width: 28, marginTop: 4}}></Image> </TouchableOpacity>

我没有收到错误代码或其他东西，但它根本没有做任何事情。 已经检查了来源等，它们很好。 不知何故，它不会更新我的照片。 也想在这两张图片之间切换。 因此，如果 A 处于活动状态并按下它应该显示 B，如果 B 处于活动状态并按下它应该显示 A。任何解决方法或解决方案？

Answer 1

您必须将您的URI放入 state 并在您的onPress上更新 state

const [like_uri, setUri]:  useState(require('../pictures/sections/hearth_empty.png')); // Initial state

 const pressLike = () => {
 setUri(require('../pictures/sections/hearth_full.png'));
}

<TouchableOpacity onPress={()=>pressLike()}>
  <Image source={like_uri} style={{height: 28, width: 28, marginTop: 4}}></Image>
</TouchableOpacity>

Answer 2

设置一个值不会更好地重新渲染组件，使用 state 并在图像之间切换，如下所示。

const SwitchImage = () => {
  const [pressed, setPressed] = useState(false);
  const like_uri1 = require('../pictures/sections/hearth_empty.png');
  const like_uri12 = require('../pictures/sections/hearth_full.png');

  const pressLike = () => {
    setPressed(!pressed);
  };

  return (
    <TouchableOpacity onPress={pressLike}>
      <Image
        source={pressed ? like_uri1 : like_uri12}
        style={{ height: 28, width: 28, marginTop: 4 }}
      />
    </TouchableOpacity>
  );
};