React Native 中的可点击平面列表项答案

【问题标题】：clickable Flat list items in React NativeReact Native 中的可点击平面列表项
【发布时间】：2020-05-04 23:02:26
【问题描述】：

我有一个显示项目列表的平面列表，我想让每个项目都可点击。我的渲染函数看起来像这样，它没有任何问题，除了它不可点击

  render() {
    return (
      <FlatList
        data={formatData(data, numColumns)}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />

    );
  }

我试图做类似于this 的事情，但它给了我一个错误，知道我的代码有什么问题吗？

      <FlatList
        data={formatData(data, numColumns)}
        style={styles.container}
        renderItem={({this.renderItem})  => (
        <TouchableHighlight
        onPress={() => console.log("hello")}>
           </TouchableHighlight>
        )}
        numColumns={numColumns}
      />

【问题讨论】：

标签： reactjs react-native jsx

【解决方案1】：

你可以这样做：

renderItem 与 TouchableOpacity。确保从 react native 导入它。

import { TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome5';
...
...

render() {
  return (
    <FlatList
      data={formatData(data, numColumns)}
      style={styles.container}
      renderItem={({item ,index}) => (
        <TouchableOpacity 
          key={index.toString()} 
          onPress={() => console.log("clicked")}
        >
          <Icon name={item} color="red"/>
        </TouchableOpacity>
      )}
      numColumns={numColumns}
      key={numColumns.toString()} // if you want to use dynamic numColumns then you have to use key props
    />
  );
}

【讨论】：

稍微解释一下你做了什么改变！！
我得到了同样的错误，不变违规：如果你打算渲染一组孩子，使用数组而是。
在将我的列表更改为数组后它可以工作，但是它显示了我的数组上的字符串，但我希望它显示的是 this.renderItem，它是一个图标列表。
@DavidShapero 我更新了答案。只需添加 Icon 组件并将图标名称作为 item 从 renderItem 参数传递。
顺便说一句，为什么是 TouchableOpacity 而不是 TouchableHightlist ？

【解决方案2】：

首先你需要导入 Touchable Opacity 和你得到的错误，确保你传递给 flatlist 的 data 是一个数组。所以检查一下：

<FlatList
data={formatData(data, numColumns)} // this should be an array , or array of objects
renderItem={({item ,index}) => (
        <TouchableOpacity 
          onPress={() => console.log("hello")}
        >
        <Text>Hi</Text>
        </TouchableOpacity>

/>

希望清楚

【讨论】：

它说 renderItem={({this.renderItem}) => (的意外标记，它说箭头函数参数中的左侧无效
请检查我的代码并检查你的一次，里面的renderItem不一样

【解决方案3】：

这就是您可以在 FlatList 内部进行迭代的方式。

现场工作https://snack.expo.io/@akhtarvahid/flatlist-simple

<FlatList
      data={formatData(data, numColumns)}
      style={styles.container}
      renderItem={({item ,index}) => (
        <TouchableOpacity 
          key={index.toString()} 
          onPress={() => console.log('Clicked item')}>
          <Text>{'Hello'}</Text>
        </TouchableOpacity>
      )}
      numColumns={numColumns}
      keyExtractor={item=>item.id}
    />

【讨论】：