Почему стиль React Native FlatList не меняется в зависимости от состояния - PullRequest
Новая
       23

Почему стиль React Native FlatList не меняется в зависимости от состояния

0 голосов
/ 02 января 2019

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

Но когда состояние изменяется и условие истинно, выбранная вкладка не меняет своего состояния. Почему изменение состояния не запускает сравнение в стиле для обновления стиля? 

<FlatList 
  horizontal
  data={this.state.drinkgroup}
  showsHorizontalScrollIndicator={false}
  renderItem={({item, index}) =>
  {
    return  <Tab 
      item={item} 
      selected={this.state.selected}           
      changeSelected={
        () => {
          this.setState({selected: item.id}, function(){                       console.log(this.state.selected, item.id)
          console.log(this.state.selected==item.id)
          })
        }} 
      }
  }
/>

export const Tab = ({item, selected, changeSelected}) => {
    return (
        <TouchableOpacity
            style={[styles.tabStyle, (selected==item.id)? styles.tabSelectedStyle: null]}
            onPress={changeSelected}
            underlayColor='#fff'
        >
            <Text style={{color: '#f2f2f2', textAlign: 'center', fontSize: 15}}>{item.name}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    tabStyle: {
        backgroundColor: '#800080',
        height: 32,
        paddingRight: 15,
        paddingLeft: 15
    },
    tabSelectedStyle: {
        borderBottomColor: 'white', 
        borderBottomWidth: 3
    }
})

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Передав extraData = {this.state} в FlatList, мы обеспечиваем повторную визуализацию самого FlatList при изменении state.selected. Без установки этого реквизита FlatList не знал бы, что ему нужно повторно визуализировать какие-либо элементы, поскольку он также является PureComponent, и сравнение реквизитов не покажет никаких изменений. 

<FlatList
   data={this.props.data}
   extraData={this.state}
   keyExtractor={this._keyExtractor}
   renderItem={this._renderItem}
  />

Это PureComponent, что означает, что он не будет повторно визуализироваться, если реквизит остается мелко-равным.

Убедитесь, что все, от чего зависит ваша функция renderItem, передается как реквизит (например, extraData), который не === после обновлений, иначе ваш пользовательский интерфейс может не обновляться при изменениях.

Это включает в себя реквизит данных и состояние родительского компонента.

Подробнее: - FlatList

0 голосов
/ 02 января 2019

Вам нужно предоставить extraData реквизит для Flatlist, если вы хотите, чтобы он рендерил свои предметы.Вы можете сделать это следующим образом: extraData={this.state}.

Передав extraData={this.state} в FlatList, мы гарантируем, что FlatList сам будет повторно визуализироваться при изменении state.selected.Без установки этого extraData prop, FlatList не узнает, что ему нужно повторно визуализировать какие-либо элементы, потому что это также PureComponent, и сравнение свойств не покажет никаких изменений.Для получения более подробной информации вы можете посетить официальную документацию здесь

...