React-native：如何在触摸时突出显示平面列表项

Posted 2023-04-15

【中文标题】React-native：如何在触摸时突出显示平面列表项

【英文标题】：React-native: how to highlight a flatlist item when it is touched

【发布时间】：2020-02-08 06:36:27

【问题描述】：

我有一个平面列表，我希望在触摸列表中的项目时显示背景颜色。见下图；如果我触摸“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 样式，但由于某种原因不执行任何操作。

【参考方案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
    />

【讨论】：

很好，这行得通！谢谢，将在 10 分钟后将其设置为答案。

出于某种原因，这个简单的例子是我第一次真正理解“extraData”的用例...感谢 azundo 的直截了当的回答！