反应原生 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