我想在按下 ListView 项目时更新该项目的样式,以便最终用户知道他/她选择了一个项目。
列表显示:
<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>
);
}
当用户激活 TouchableHighlight 时,如何更改第二个视图的样式?
我还想将选定的对象添加到选定对象的数组中。
您应该使用组件状态并在按下时将选定的好友 ID 存储在其中TouchableHighlight
.
就像是:
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>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)