大家好，我已经建立了一个平面列表，现在我想单击该名称以显示其详细信息

Question

1. 我建立了一个平面列表，其中客户名称只有名称。
2. 现在我想单击这些名称以显示客户详细信息我在 Fire Store 中有详细信息 数据库。
3. 只需要您的帮助来解决这个问题。
4. 此屏幕中有姓名和电子邮件，数据库中有更多关于此详细信息的信息。比如联系电话、地区、时间和日期等。

import React, { useEffect, useState } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { db } from "../firebase";

function DetailsScreen() {

  const [contacts, setContacts] = useState([]);

  var today = new Date();

  var dd = today.getDate();
  var mm = today.getMonth() + 1;
  var yyyy = today.getFullYear();

  today = mm + '/' + dd + '/' + yyyy;


  // 'createdDate', '>=', last7DayStart FOR LAST WEEK THIS LOGIC
  // 'createdDate', '>=', lastMonthThisDay FOR LAST MONTH THIS LOGIC

  // var last7DayStart = moment().startOf('day').subtract(1, 'week').format('M/DD/YYYY');
  // var lastMonthThisDay = moment().startOf('day').subtract(1, 'month').format('M/DD/YYYY');
  // var yesterdayEndOfRange = moment().endOf('day').subtract(1, 'day').format('D/MM/YYYY');
  // console.log(last7DayStart);

  useEffect(() => {
    const fetchData = async () => {
      const data = await db.collection("contacts").where('createdDate', '<', today).get();
      setContacts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
  }, []);


  function handleUpdate() {
    alert("updated")
  };

  function handleDelete() {
    alert("Successfully Removed")
  };

  return (

    <FlatList
      style={styles.list}
      data={contacts}
      renderItem={({ item }) => <Text style={styles.text} numberOfLines={9}>
        <Text style={styles.text1}> Student Details </Text>
        {"\n"}
        {"\n"}
        Name: {item.name}
        {"\n"}
        Email: {item.email}
        <TouchableOpacity
          onPress={() => handleUpdate()} style={{ paddingTop: 10 }}>
          <Text style={{ borderWidth: 0.80 }}> Update </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleDelete()} style={{ paddingLeft: 20 }}>
          <Text style={{ borderWidth: 0.75 }}> Delete </Text>
        </TouchableOpacity>
      </Text>}
    />
  )
};

export default DetailsScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    paddingTop: 5,
  },
  text: {
    fontSize: 15,
    fontStyle: 'italic',
    paddingLeft: 15,
    marginHorizontal: 20,
    borderBottomWidth: 1,
    paddingBottom:10
  },
  list: {
    flex: 1,
    paddingTop: 10,
    backgroundColor: '#fff'
  },
  text1: {
    flex: 1,
    fontSize: 18,
    fontWeight: 'bold',
    paddingTop:5
  }
});

Answer 1

我会将renderItem 逻辑抽象为一个具有切换状态的 React 组件，该状态有条件地呈现附加的详细信息值。这允许每个呈现的平面列表元素保持自己的状态，以有条件地显示或隐藏其他细节。

const ContactDetail = ({ contact, handleUpdate, handleDelete }) => {
  const [showDetail, setShowDetail] = React.useState(false);

  const toggleDetail = () => setShowDetail(show => !show);

  return (
    <Text style={styles.text} numberOfLines={9}>
      <Text style={styles.text1}> Student Details </Text>
      {"\n"}
      {"\n"}
      Name: {contact.name}
      {"\n"}
      Email: {contact.email}

      <TouchableOpacity
        onPress={toggleDetail} style={{ paddingTop: 10 }}>
        <Text style={{ borderWidth: 0.80 }}>Toggle Detail</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={handleUpdate} style={{ paddingTop: 10 }}>
        <Text style={{ borderWidth: 0.80 }}>Update</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={handleDelete} style={{ paddingLeft: 20 }}>
        <Text style={{ borderWidth: 0.75 }}>Delete</Text>
      </TouchableOpacity>
      {showDetail && (
        <Text>
          {/* show additional contact detail values */}
        </Text>
      )}
    </Text>
  );
};

平面列表

<FlatList
  style={styles.list}
  data={contacts}
  renderItem={({ item }) => (
    <ContactDetail
      contact={item}
      { ...{ handleUpdate, handleDelete } }
   />
  )}
/>