Как обрабатывать 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;
Как мне это сделать?