Javascript React native:触摸时更改ListView项目的样式
我想在按下ListView项目时更新该项目的样式,以便最终用户知道他/她选择了某个项目 列表视图:Javascript React native:触摸时更改ListView项目的样式,javascript,android,listview,reactjs,react-native,Javascript,Android,Listview,Reactjs,React Native,我想在按下ListView项目时更新该项目的样式,以便最终用户知道他/她选择了某个项目 列表视图: <ListView dataSource={this.state.dataSource} renderRow={this.renderFriend} /> 行渲染器: renderFriend(friend) { return ( <TouchableHighlight onPress={ ??? }> <View sty
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderFriend}
/>
行渲染器:
renderFriend(friend) {
return (
<TouchableHighlight onPress={ ??? }>
<View style={styles.friendItem}>
<View style={styles.profilePictureContainerNoBorder}>
<Image
source={{uri: 'https://graph.facebook.com/' + friend.id + '/picture?width=500&height=500'}}
style={styles.profilePicture}
/>
</View>
<Text style={styles.profileName}>{friend.name}</Text>
</View>
</TouchableHighlight>
);
}
renderFriend(朋友){
返回(
{friend.name}
);
}
当用户激活TouchableHighlight时,如何更改第二个视图的样式
我还想将所选对象添加到所选对象的数组中。当按下
触摸突出显示按钮时,应使用组件状态并将所选好友ID存储在其中
比如:
constructor(props) {
super(props);
this.state = {
selectedFriendIds: [],
}
}
selectFriend(friend) {
this.setState({
selectedFriendIds: this.state.selectedFriendIds.concat([friend.id]),
});
}
renderFriend(friend) {
const isFriendSelected = this.state.selectedFriendIds.indexOf(friend.id) !== -1;
const viewStyle = isFriendSelected ?
styles.profilePictureContainerSelected : styles.profilePictureContainerNoBorder;
return (
<TouchableHighlight onPress={ () => this.selectFriend(friend) }>
<View style={styles.friendItem}>
<View style={viewStyle}>
<Image
source={{uri: 'https://graph.facebook.com/' + friend.id + '/picture?width=500&height=500'}}
style={styles.profilePicture}
/>
</View>
<Text style={styles.profileName}>{friend.name}</Text>
</View>
</TouchableHighlight>
);
}
构造函数(道具){
超级(道具);
此.state={
SelectedFriendId:[],
}
}
选择friend(朋友){
这是我的国家({
selectedFriendIds:this.state.selectedFriendIds.concat([friend.id]),
});
}
renderFriend(朋友){
const isFriendSelected=this.state.selectedFriendIds.indexOf(friend.id)!=-1;
const viewStyle=isFriendSelected?
styles.profilePictureContainerSelected:styles.profilePictureContainerNoBorder;
返回(
此选项。选择friend(friend)}>
{friend.name}
);
}
我想在ListView中查看相同的内容,您能帮我吗