Как обрабатывать onpress для элемента recyclerlistview в React Native

Я использую recyclerlistview для отображения списка. Но мне нужно добавить событие onPress к элементу, когда пользователь нажимает.

Я проверил документацию, но информации нет.

Я упростил свой код, удалил все компоненты стиля. Мне нужно вызвать функцию openItem(data) и нужно передать ему данные об элементе.

import React, { memo, useRef, useState, useEffect } from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
  Platform,
  TouchableHighlight,
  Dimensions,
  RefreshControl,
  ScrollView,
} from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider, BaseScrollView } from "recyclerlistview"; // Version can be specified in package.json

const ViewTypes = {
  FULL: 0,
};

let containerCount = 0;
let { width } = Dimensions.get("window");
const dataProviderMaker = (data) => (new DataProvider((r1, r2) => r1 !== r2)).cloneWithRows(data)

const ContactListScreen = () => {
  const [contacts, setContacts] = useState([]);
  const [dataProvider, setDataProvider] = useState(dataProviderMaker(contacts))
  const _layoutProvider = useRef(layoutMaker()).current
  const listView = useRef()

  useEffect(() => {
    setDataProvider(dataProviderMaker(contacts))
  }, [contacts])

const openItem = (data)=>{
    //TODO
}

  const rowRenderer = (type, data) => {
    return (
      <TouchableOpacity onPress={(vis) => { setUserName(data.fullName); setPhoneNumber(data.phoneNumber); setModalVisible(true) }}>
        <View>
          <Text>{`${data.fullName} `}</Text>
          <Text>{`${data.phoneNumber}`}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View>
          <RecyclerListView
            ref={listView}
            scrollViewProps={{
              refreshControl: <RefreshControl
              />
            }}
            onEndReachedThreshold={1}
            externalScrollView={ExternalScrollView}
            layoutProvider={_layoutProvider}
            dataProvider={dataProvider}
            rowRenderer={rowRenderer} />
        </View>
      </SafeAreaView>
    </>
  );
};

const layoutMaker = () => (
  new LayoutProvider(
    index => {
        return ViewTypes.FULL;
    },
    (type, dim) => {
      dim.width = width
      dim.height = 60
     }
    })
)

class ExternalScrollView extends BaseScrollView {
  scrollTo(...args) {
    if (this._scrollViewRef) {
      this._scrollViewRef.scrollTo(...args);
    }
  }
  render() {
    return <ScrollView {...this.props}
      ref={scrollView => { this._scrollViewRef = scrollView; }} />
  }
}

class CellContainer extends React.Component {
  constructor(args) {
    super(args);
    this._containerId = containerCount++;
  }
  render() {
    return <View {...this.props}>{this.props.children}</View>;
  }
}
export default ContactListScreen;

Как мне это сделать?

0 ответов

Другие вопросы по тегам