FlatList не отображает стиль динамически - PullRequest
Новая
       21

FlatList не отображает стиль динамически

2 голосов
/ 13 июня 2019

В настоящее время я борюсь за создание моего FlatList, применяя изменения, которые я делаю к нему.То, что я сейчас хочу, это то, что когда я щелкаю элемент в моем плоском списке, он выделяется определенным цветом.Я следовал подходу парня , но у меня проблема в том, что для меня не работает обновление, когда я нажимаю.

Я вижу через консоль, что все, что я делаю, выполняетмодификации, но я думаю, что мне не хватает некоторой точки с параметром extraData, так как он не выполняет повторный рендеринг с backgroundColor, который я хотел бы применить.

У меня следующий код, я знаю, что стиль IЯ применяю правильно, так как, если я заменю в карте styles.list на 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>
  );
}

Здесь мы можем найти функции 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)
    };

1 Ответ

0 голосов
/ 21 июня 2019

Что ж, главная проблема заключалась в том, что я не использовал .setState и вместо этого выполнял задания, которые убивали слушателей.

...