React-Native如何从平面列表中的项目处理onPress ？？？

Question

我的FlatList是无状态组件，当按下项目时，我想通过调用方法“ handleOnPress”来处理onPress。 我该怎么做 ？？ 以下是示例代码。
`

handleOnPress = () => {
  .....
}
<SampleListView
    data={prop.data}
    onPress={this.handleOnPress}
/>
const SampleListView = (props: Props) => {
  return (
    <FlatList
        style={styles.container}
        data={props.data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
    />
    )
}
renderItem = ({ item }: { item: DataSample }) => {
  return (
  <TouchableWithoutFeedback onPress={ () => props.onPress}>
      ....
  </TouchableWithoutFeedback>
  )
}

`

Answer 1

你可以试试看吗？

handleOnPress = () => {
  .....
}
<SampleListView
    data={prop.data}
    onPress={this.handleOnPress}
/>
const SampleListView = (props: Props) => {
  return (
    <FlatList
        style={styles.container}
        data={props.data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
    />
    )
}
renderItem = ({ item }: { item: DataSample }) => {
  return (
    <TouchableWithoutFeedback onPress={props.onPress}>
      <View>
        ....
      </View>
    </TouchableWithoutFeedback>
  )
}

请注意这2个链接。

https://facebook.github.io/react-native/docs/flatlist

内置自定义组件的TouchableWithoutFeedback不会触发onPress回调

不同之处在于，将回调作为参数并添加了View层。

Answer 2

您的代码存在问题，因为此onPress={props.onPress}您的renderItem函数不知道（道具）它所知道的只是传递给它的item参数。

如果你这样做

onPress={() => alert("clicked")}

它会工作。 可以通过数据传递onPress函数，也可以在构造函数中绑定renderItem函数，然后调用

onPress={() => this.props.onPress()}