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

Question

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

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 } }
   />
  )}
/>

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

Hi everyone i have build a flatlist in which names are there now i want to click on that name to show its details

reactjs

mobile-development

react-native

react-native-android