反應原生 onPress = 更改圖像的源代碼

Question

我在另一個文件中有一個對象數組，我將它映射到 2 個文件中怎么做：react-native 中的 e.target.src 因為在 react-native 中我們沒有 e

// 存儲文件：

export default [
        {
            liked: false,
        },
        { 
            liked: false,
        },
        {
            liked: false,
        },
        {
            liked: false,
        },
        
]

// 2 個文件

import images from 'store.js'

function unlike (){
// in react will be """ e.target.src = '../assets/unliked.png'  """  but how in react-native ?
}
function like (){
    // in react will be """ e.target.src = '../assets/liked.png' """ but how in react-native ?
}
return(
    <ScrollView>
                {images.map(image => {
                    return({image.liked ? <Image onPress={unlike} source={require('../assets/liked.png')} /> : <Image onPress={unlike} source={require('../assets/unliked.png')} />
              </ScrollView >
)

Answer 1

您可以預先導入兩個圖像，並根據liked與否動態設置圖像源。 要重新渲染每個喜歡或不喜歡的用戶界面，請使用狀態：

import images from 'store.js'
import React, { useState, useEffect } from 'react';
// other imports

const liked = require('../assets/liked.png')
const disliked = require('../assets/unliked.png')


const LikesComponent = (props) => {
  const [likesState, setLikesState] = useState(images)

  const handleLikes = (index) => {
    let temp = [...likesState]
    temp[index].liked = !temp[index].liked

    setLikesState(temp)
  }

  return(
    <ScrollView>
       {
       likesState.map((image, index) => <Image key={index} 
                                               source={image.liked ? liked : disliked} 
                                               onPress={() => handleLikes(index)} />
       }
    </ScrollView>
  )
}

export default LikesComponent