react-native - FlatList 不动态呈现样式

问题描述

我目前正在努力使我的 FlatList 应用我对其所做的更改。我现在想要的是，当我单击平面列表中的一个项目时，它会以某种颜色突出显示。我遵循了一个人所做的方法，但我遇到的问题是，一旦我点击，我就无法进行更新。

我可以通过控制台看到我所做的一切都在执行修改，但我认为我错过了 extraData 参数的一些要点，因为它没有使用我想要应用的 backgroundColor 重新渲染。

我拥有的代码如下，我知道我正在应用的样式是正确的，因为如果我在每个样式.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>
  );
}

在这里我们可以找到state和SelectItem函数：

    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)
    };

标签： react-nativereact-native-flatlistnative-base

react-native - FlatList 不动态呈现样式

问题描述

解决方案

推荐阅读