如何在React Native中处理recyclerlistview项目上的onpress

问题描述

我一直在使用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;

我该怎么办？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

onpress react-native recyclerlistview