Question

我再次发布我的问题并进行了一些代码修改。我需要为我的项目列表中的选定项目设置特定样式。我的代码是：

 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}
              />

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

####################
####################
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状态在按下一个项目时获得了索引值，但是由于组件未重新渲染，我无法编辑样式。

我的风格是：

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

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

Answer 1

您需要将[client] # password = port = 8080 socket = "C:/xampp/mysql/mysql.sock" # Here follows entries for some specific programs # The MySQL server [mysqld] port= 8080 socket = "C:/xampp/mysql/mysql.sock" basedir = "C:/xampp/mysql" tmpdir = "C:/xampp/tmp" datadir = "C:/xampp/mysql/data" pid_file = "mysql.pid" # enable-named-pipe key_buffer = 16M max_allowed_packet = 1M sort_buffer_size = 512K net_buffer_length = 8K read_buffer_size = 256K read_rnd_buffer_size = 512K myisam_sort_buffer_size = 8M log_error = "mysql_error.log"添加到this.state.selectedIndex的{{1}}中，以重新呈现组件。

extraData

请参阅docs以供参考。

Answer 2

您是否尝试过将FlatState中的setState提取到其自己的函数中。我永远不会在onPress内调用setState（扰流器：这是一个异步函数）。

对setState的调用不同步。它创建一个“待处理状态转换”。您应该在引发事件的过程中显式传递新的输入值。

我要创建一个名为setIndex的新函数，并将逻辑放在其中。

setIndex = async (index) => {
  await this.setState({
    selectedIndex: index
})

并在onPress中使用它：

onPress={() => setIndex(index)}

反应本机元素处理选定的ListItem样式

2 个答案: