React native onPress =更改镜像的源代码
提问于 2021-10-31 00:09:42
我在另一个文件中有一个对象数组，我将其映射到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 >
)
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-31 01:34:48
您可以预先导入两张图片，也可以动态设置是否基于liked的图片来源。要在每个喜欢或不喜欢的地方重新呈现UI，请使用状态：
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69784983
复制相关文章
点击加载更多
腾讯云开发者
