web-dev-qa-db-ja.com

React-NativeフラットリストのアイテムからonPressを処理する方法???

私の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>
  )
}

`

reactjsreact-nativereact-native-iosreact-native-flatlist
4
Daniel

これを試して頂けますか？

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コールバックを起動しません

違いは、コールバックをパラメーターとして指定し、ビューレイヤーを追加することです。

2
Tayfun Yaşar

あなたのコードの問題はこれですonPress={props.onPress}renderItem関数は、渡された項目パラメーターだけが知っている（props）を知りません。

あなたがこれをするなら

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

それが動作します。 onPress関数をデータに渡すか、コンストラクタでrenderItem関数をバインドしてから呼び出します

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