如何在 React Native 的平面列表中的可触摸不透明度内执行函数？

Posted 2023-02-23

【中文标题】如何在 React Native 的平面列表中的可触摸不透明度内执行函数？

【英文标题】：How do I execute a function within a touchable opacity within a flatlist in React Native?

【发布时间】：2021-11-16 17:51:51

【问题描述】：

我的平面列表中的每个项目都是一个可触摸的不透明度（一个图标）。我想要一个在点击图标时执行的功能。此函数已作为来自父组件的道具传递，我将图标数据传递给该道具。我认为这将是直截了当的。但是，当我点击该图标以打开包含我的平面列表的模式时，该模式不会打开并且我收到警告：“无法从不同组件的函数体内更新组件。”我很困惑，因为我正在执行一个从我的父组件作为道具传递的函数。我不确定我应该怎么做？

这是我想在点击时调用的函数（changeIcon 属性是导致问题的原因）：

function chosenIcon(selectedIcon) 
  props.changeIcon(selectedIcon);
  props.closeIconList(false);

这是 FlatList，它似乎不喜欢我传递 item.item.icon。

<FlatList
  numColumns=3
  data=ICONS
  renderItem=(item) => (
    <TouchableOpacity style=styles.item onPress=chosenIcon(item.item.icon)>
      <Text style=styles.text>item.item.icon</Text>
    </TouchableOpacity>
  )
/>

如果我注释掉函数中的 props.changeIcon 行并且不传递数据 item.item.icon，则一切正常，并且当我选择图标时模式会关闭。

我希望这已经足够清楚了！谢谢！

【问题讨论】：

好吧，问题可能会出现，因为不是像 onPress=() => chosenIcon(item.item.icon) 那样将函数传递给 onPress 属性，而是调用它。为了更好地理解，假设您的函数chosenIcon 将返回一些结果：function chosenIcon(selectedIcon) props.changeIcon(selectedIcon); props.closeIconList(false); return 'sample of return' 因此，在这种情况下，您会将“返回样本”字符串传递给onPress 属性。希望对你有帮助

我明白了！感谢您的帮助

【参考方案1】：

请尝试在 TouchableOpacity onPress 回调中添加粗箭头函数。

 <FlatList 
    numColumns = 3
    data = ICONS
    renderItem = item => (
      <TouchableOpacity style = styles.item onPress= ()=> chosenIcon(item.item.icon)> // add ()=>
         <Text style = styles.text>item.item.icon</Text>
      </TouchableOpacity>
    )
  />