React native 平面列表不动态渲染样式
我目前正在努力将我所做的更改应用到我的平面列表中。我现在想要的是，当我单击平面列表中的某个项目时，它会以某种颜色高亮显示。我采用了一种由a完成的方法，但我有一个问题，即对我来说，一旦我单击，就无法进行更新 我可以通过控制台看到我所做的一切都执行了修改，但我认为我缺少了extraData参数的一些要点，因为它并没有使用我想要应用的背景色重新渲染 我的代码如下所示，我知道我应用的样式是正确的，因为如果我在map styles.list per styles.selected中进行替换，则所有内容都会获得我希望应用于我单击的元素的背景 总之，我认为我的问题是平面列表没有重新渲染，所以它没有显示我对它执行的修改。知道我做错了什么吗？有小费吗React native 平面列表不动态渲染样式,react-native,react-native-flatlist,native-base,React Native,React Native Flatlist,Native Base,我目前正在努力将我所做的更改应用到我的平面列表中。我现在想要的是，当我单击平面列表中的某个项目时，它会以某种颜色高亮显示。我采用了一种由a完成的方法，但我有一个问题，即对我来说，一旦我单击，就无法进行更新 我可以通过控制台看到我所做的一切都执行了修改，但我认为我缺少了extraData参数的一些要点，因为它并没有使用我想要应用的背景色重新渲染 我的代码如下所示，我知道我应用的样式是正确的，因为如果我在map styles.list per styles.selected中进行替换，则所有内容都会
render() {
const { students, studentsDataSource, loading, userProfile } = this.props.navigation.state.params.store;
this.state.dataSource = studentsDataSource._dataBlob.s1.map(item => {
item.isSelect = false;
item.selectedClass = styles.list;
return item;
})
const itemNumber = this.state.dataSource.filter(item => item.isSelect).length;
return (
<View style={styles.container}>
<Item rounded style={styles.searchBar}>
<Input placeholder='Group Name'/>
</Item>
<FlatList
style={{
flex: 1,
width: "100%",
}}
data={this.state.dataSource}
ItemSeparatorComponent={this.FlatListItemSeparator}
renderItem={ ({ item }) => (
<ListItem avatar style={[styles.list, item.selectedClass]}
onPress={() => this.selectItem(item)}>
<Left>
{!item.voteCount && <Avatar unseen={true} /> }
{!!item.voteCount > 0 && <Avatar />}
</Left>
<Body>
<Text>{item.name}</Text>
<Text note>{item.group}</Text>
</Body>
</ListItem>
)
}
listKey={item => item.key}
extraData={this.state}
/>
</View>
);
}
主要的问题是，我没有使用.setState，相反，我做的赋值杀死了听众
constructor(props) {
super(props)
this.state = {
dataSource : [],
}
}
//FlatListItemSeparator = () => <View style={styles.line} />;
selectItem = data => {
//{console.log("inside SelectItem=", data)}
data.isSelect = !data.isSelect;
data.selectedClass = data.isSelect? styles.selected: styles.list;
const index = this.state.dataSource.findIndex( item => data.key === item.key);
this.state.dataSource[index] = data;
this.setState({
dataSource: this.state.dataSource,
});
console.log("This state has the changes:=",this.state.dataSource)
};