React native:在触摸时更改ListView项的样式
React native: change style of ListView item on touch
我想在按下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时,我如何更改第二个视图的样式?
我还想将选定的对象添加到选定对象的数组中。
按下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>
);
}
在返回所选元素的功能组件中,我使用选项onPress={()=>onTouch(I)}
"i"是数组索引
例如默认列表:
export const HomePage = () => {
const list = [
{
title: 'FFFFFFFFFF',
icon: 'timer',
idx: 1
},
{
title: 'AAAAAAAAAAAAAAA',
icon: 'place',
idx: 2
},
{
title: 'BBBBBBBBB',
icon: 'info',
idx: 3
},
];
const onTouch = (idTouch) => {
console.log(idTouch);
};
return (
<ScrollView>
<View style={styles.section}>
<Text style={styles.text}>TEXT1</Text>
<Text style={styles.text2}>tEXT2</Text>
{list.map((item, i) => (
<TouchableOpacity on activeOpacity={0.7} key={i+1} style={styles.item} onPress={()=>onTouch(i)}>
<ListItem key={i} bottomDivider >
<Icon name={item.icon} />
<ListItem.Content >
<ListItem.Title>{item.title}</ListItem.Title>
</ListItem.Content>
<ListItem.Chevron />
</ListItem>
</TouchableOpacity>
))}
</View>
</ScrollView>
);
};
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 定义完全独立的样式信息
- 使用Jquery选择或取消选择ListView中的所有复选框
- W3C循环样式的JavaScript
- jQuery/JavaScript在线公文包表单-打印样式表
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- FF和Chromium中CSS样式按钮的外观差异
- 如何首先设置样式<td>表中包含在窗体中的元素
- javascript问题正文样式
- 使用具有内联样式的tidy-html5
- DataTables-创建自定义分页样式(加载更多样式)
- 具有所有样式的文本正在复制到可编辑文本区域
- 如何提供在javascript中编写对对象的重复访问以设置元素样式的简写
- React Native Listview留有余地
- 绑定Range输入以修改样式
- React native:在触摸时更改ListView项的样式
- append()listview Javascript后丢失JQuery Mobile CSS样式