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