Question

我有一个平面列表，我希望背景色在触摸时会出现在列表中的某个项目上。见下图；如果我触摸“ game_name3”，该怎么办：

但是什么也没发生；仍然看起来像左侧的屏幕。

这是我的代码：

constructor (props) {
    super(props);
    this.state = {
        ...
        game_names: [
            {game_name:"game_name1", players:4},
            {game_name:"game_name2", players:4},
            {game_name:"game_name3", players:4},
            {game_name:"game_name4", players:4},
            {game_name:"game_name5", players:4},
            {game_name:"game_name6", players:4},
        ],
        game_selected: '',
        ...
    }
}
...
selectPublicGame = (game) => {
    this.setState({game_selected: game});
}

renderItem = ({item}) => {
  const unselected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between'}}>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      {item.game_name}
    </Text>
    <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  const selected_game =
  <View style={{flexDirection: 'row', flex: .5, justifyContent: 'space-between', backgroundColor: colors.JBTealTrans}}>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
        {item.game_name}
      </Text>
      <Text style={[styles.listText, styles.textPaddingHorizontal]}>
      ({item.players}/6)
    </Text>
  </View>;

  let selection;

  if (item.game_name == this.state.game_selected) {
      selection = selected_game
  } else {
      selection = unselected_game
  }

  return (
    <TouchableWithoutFeedback
      onPress={() => this.selectPublicGame(item.game_name)}
    >
      {selection}
    </TouchableWithoutFeedback>
  )
}
...
render() {
  ...
  return(
    ...
    <FlatList
      data={this.state.game_names}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
    ...
  )
}
...

单位列表中的每个项目都包装在TouchableWithoutFeedback中，onPress将game_selected状态设置为所选的游戏名称。这些项目是有条件渲染的。如果游戏名称与game_selected状态相同，则应呈现“ selected_game”常量，该常量具有backgroundColor样式，但由于某种原因未执行任何操作。

Answer 1

FlatList是一个纯组件，仅当对其data或extraData道具进行严格的相等性检查返回false时才重新渲染。由于您的组件渲染取决于state.game_selected，因此需要将其包含在extraData中：

<FlatList
      data={this.state.game_names}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index.toString()}
      extraData={this.state.game_selected}
    />

React-native：如何在触摸扁平化项目时突出显示它

1 个答案: