我如何在 react-native 中点击图像时实现 Like Unlike 功能?
How I can Implement Like Unlike functionality on click of image in react-native?
当我要点击图片时,点击后只有一次图片被更改,我无法更改图片。
所以我想知道如何实现这个功能,就像在 react-native.I 中是新的,所以请帮助我如何实现这个 functionality.Thank 你在高级。
这里放一些代码方便理解
selectLike = (type) => {
if(type==1){
this.setState({like:'Unlike',likeType:1})
}
}
<TouchableOpacity onPress={() => { this.selectLike(1) }}>
{this.state.likeType===1 ?
<View>
<Image source={require('../../Images/redheart.png')} style={styles.imagetriple} />
<Text style={styles.texttriple}>{this.state.like}</Text>
</View>
:
<View>
<Image source={require('../../Images/heart.png')} style={styles.imagetriple} />
<Text style={styles.texttriple}>{this.state.like}</Text>
</View>
}
</TouchableOpacity>
这样试试,喜欢的是true or false
state = {
like: 'Unlike',
liked: false
}
selectLike = () => {
this.setState(prevstate => {
return {
...prevstate,
like: (prevstate.liked ? 'Unlike' : 'like'), liked: !prevstate.liked
}
})
}
}
<TouchableOpacity onPress={this.selectLike}>
{this.state.liked ?
<View>
<Image source={
require('../../Images/redheart.png')
} style={
styles.imagetriple
}
/> <Text style={
styles.texttriple
} > {this.state.like} </Text> </View> :
<View>
<Image source={
require('../../Images/heart.png')
} style={
styles.imagetriple
}
/> <Text style={
styles.texttriple
}> {
this.state.like
} </Text> </View>
}
</TouchableOpacity>
当我要点击图片时,点击后只有一次图片被更改,我无法更改图片。
所以我想知道如何实现这个功能,就像在 react-native.I 中是新的,所以请帮助我如何实现这个 functionality.Thank 你在高级。
这里放一些代码方便理解
selectLike = (type) => {
if(type==1){
this.setState({like:'Unlike',likeType:1})
}
}
<TouchableOpacity onPress={() => { this.selectLike(1) }}>
{this.state.likeType===1 ?
<View>
<Image source={require('../../Images/redheart.png')} style={styles.imagetriple} />
<Text style={styles.texttriple}>{this.state.like}</Text>
</View>
:
<View>
<Image source={require('../../Images/heart.png')} style={styles.imagetriple} />
<Text style={styles.texttriple}>{this.state.like}</Text>
</View>
}
</TouchableOpacity>
这样试试,喜欢的是true or false
state = {
like: 'Unlike',
liked: false
}
selectLike = () => {
this.setState(prevstate => {
return {
...prevstate,
like: (prevstate.liked ? 'Unlike' : 'like'), liked: !prevstate.liked
}
})
}
}
<TouchableOpacity onPress={this.selectLike}>
{this.state.liked ?
<View>
<Image source={
require('../../Images/redheart.png')
} style={
styles.imagetriple
}
/> <Text style={
styles.texttriple
} > {this.state.like} </Text> </View> :
<View>
<Image source={
require('../../Images/heart.png')
} style={
styles.imagetriple
}
/> <Text style={
styles.texttriple
}> {
this.state.like
} </Text> </View>
}
</TouchableOpacity>