React Native Elements 处理选定的 ListItem 样式 [英] React Native Elements Handle selected ListItem style

问题描述

我通过一些代码修改再次发布了我的问题.我需要为我的项目列表中的选定项目设置特定样式.我的代码是:

I post again my question with some code modifications. I need to set a specific style for the selected item in my List of items. My code is :

 constructor (props) {
    super(props)

    this.state = {
      selectedIndex: null
    }
  }

<FlatList
                data={this.state.data}
                renderItem={({ item, index }) => (
                  <ListItem
                    leftAvatar={{ source: { uri: item.avatar } }}
                    title={`${item.firstName} ${item.lastName}`}
                    // subtitle={item.email}
                    chevron
                    onPress={() => {
                      this.setState({
                        selectedIndex: index
                      })
                      console.log('####################')
                      console.log(this.state.selectedIndex)
                      console.log(index)
                      console.log('####################')
                    }}
                    containerStyle={
                      this.state.selectedIndex === index
                        ? styles.active
                        : styles.inactive
                    }
                  />
                )}
                keyExtractor={item => item.email}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
              />

当我在控制台中测试时，我得到了这些值:

When i tested in the console i got those values :

####################
####################
2
3
####################
####################
3
0
####################
####################
0
1
####################
####################
1
2
####################
####################
2
3
####################
####################
3
4
####################
####################
4
5
####################
####################
5
6
####################
####################
6
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
3
####################
####################
3
2
####################
####################
2
2
####################

selectedIndex 状态在按下项目时获得索引值，但我无法编辑样式，因为组件没有重新渲染.

The selectedIndex state got the index value when press an item but i can't edit the style cause the component is not re-rendering.

我的风格是:

const styles = StyleSheet.create({
  active: {
    backgroundColor: 'green'
  },
  inactive: {
    backgroundColor: 'grey'
  }
})

当 selectedIndex 等于 index 时，我需要应用活动类，但它不起作用

I need to apply the active class when selectedIndex is equal to index but it doesn't work

推荐答案

需要在FlatList的extraData中添加this.state.selectedIndex 用于要重新渲染的组件.

You need to add the this.state.selectedIndex to the extraData of the FlatList for the component to be rerendered.

<FlatList
    data={this.state.data}
    renderItem={({ item, index }) => (...)}
    extraData={this.state.selectedIndex}
/>

请参阅文档以供参考.

这篇关于React Native Elements 处理选定的 ListItem 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！