在 React Native 中更新图像答案

【问题标题】：Updating an Image in React Native on press在 React Native 中更新图像
【发布时间】：2020-05-16 11:35:10
【问题描述】：

所以我现在在 Google 和 Stackoverflow 中查找了大约一个 hout，但我找不到我的问题的解决方案：我有一个带有存储在 var like_uri 中的内部源的图像。现在图像显示正常并且可以正常工作。我用<TouchableOpacity> 包裹它，包括onPress()。每次用户单击此图像时，它都应通过更新源变量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。任何解决方法或解决方案？

【问题讨论】：

标签： javascript image react-native

【解决方案1】：

您必须将您的URI 放入状态并更新您的onPress 上的状态

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>

【讨论】：

【解决方案2】：

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

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>
  );
};

【讨论】：