如何在 React Native 中为 FlatList Item 添加点击事件？

Question

我正在开发用于学习的演示应用程序 React native 我需要呈现可点击的 FlatList 项目。

这里是Render和itemClick函数：

render() {
  return (
    <View style={styles.container}>
      <View>
        <FlatListData list={this.state.itemList} />
      </View>
    </View>
  );
}

itemClick(item){
  console.log('click on item', item);
}

我已经为此声明了 FlatListData 功能组件：

const FlatListData = ({list}) => {
    return (
      <FlatList
        data={list}
        keyExtractor={(item, index) => index.toString()}
        renderItem={itemList}
      />
    );
};

在 FlatList 组件中，RenderItem 属性再次具有单个项目的自定义组件，即：

const itemList = ({item, index}) => {
  return (
      <TouchableOpacity onPress={this.itemClick(item)} style={styles.catalogContainer}>
        <Image
          source={{uri: item.img}}
          style={styles.imageStyle}
        />
      </TouchableOpacity>
    );
};

但是这段代码不起作用。它会给我这样的错误：Undefined is not an object (eveluting _this.itemClick)

这里应该用什么方式在什么地方写item的点击功能？

谁有答案可以解决我的问题？

注意：

所有代码都写在一个js file。我的 Render 函数在我的 class 组件中。和其他两个 declarative 组件不在那个 class 组件中。
我需要点击功能中的那个项目。但是我不知道如何在函数内部传递参数。

Answer 1

您可以采取一些措施来解决您的问题。

您需要将 itemClick 函数作为箭头函数移动到 itemList 中。

const itemList = ({ item, index }) => {
  itemClick = item => {
    console.log("click on item", item);
  };

  return (
    <TouchableOpacity
      // onPress={this.itemClick(item)}
      onPress={() => this.itemClick(item)}
      style={styles.catalogContainer}
    >
      <Image source={{ uri: item.img }} style={styles.imageStyle} />
    </TouchableOpacity>
  );
};

将您的 itemClick 函数作为 props 传递给子组件

render() {
    return (
        <View style={styles.container}>
            <FlatListData list={this.state.itemList} onItemClick={this.itemClick} />
        </View>
    );
}

itemClick = (item) => {
    console.log('click on item', item);
}

现在您可以在 itemList

中调用 onItemClick prop

const FlatListData = ({ list, onItemClick }) => {
  itemList = ({ item }) => (
    <TouchableOpacity
      onPress={() => onItemClick(item)}
      style={styles.catalogContainer}
    >
      <Image source={{ uri: item.img }} style={styles.imageStyle} />
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={list}
      keyExtractor={(item, index) => index.toString()}
      renderItem={this.itemList}
    />
  );
};

希望对您有所帮助。有疑问欢迎留言。

如何在 React Native 中为 FlatList Item 添加点击事件？

How to add Click Event on FlatList Item in React Native?

list

click

react-native