reactjs - 搜索后点击时如何查看特定成员的完整详细信息？

Question

我建立了一个搜索引擎，我能够成功获取数据我想要做的唯一物品是在选择搜索的字段时，它将显示详细信息。 (还有更多详细信息，如年龄、house_no 等。)就像另一个屏幕必须提供完整的详细信息。
我卡在这里了，请帮帮我。这就像导航到另一个具有完整详细信息的屏幕，现在我正在使用警报命令来显示我想要另一个屏幕的一些详细信息。谢谢。

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

const App = () => {
  const [search, setSearch] = useState('');
  const [filteredDataSource, setFilteredDataSource] = useState([]);
  const [masterDataSource, setMasterDataSource] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
        const data = await db
            .collection('Data')
            .get();
            setFilteredDataSource(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
            setMasterDataSource(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
}, []);

  const searchFilterFunction = (text) => {

    if (text) {
      const newData = masterDataSource.filter(
        function (item) {
          const itemData = item.FM_NAME_EN + item.EPIC_NO + item.MOBILE_NO
            ? item.FM_NAME_EN.toUpperCase() + item.EPIC_NO.toUpperCase() + item.MOBILE_NO
            : ''.toUpperCase();
          const textData = text.toUpperCase();
          return itemData.indexOf(textData) > -1;
      });
      setFilteredDataSource(newData);
      setSearch(text);
    } else {
      setFilteredDataSource(masterDataSource);
      setSearch(text);
    }
  };

  const ItemView = ({item}) => {
    return (
      <Text
        style={styles.itemStyle}
        onPress={() => getItem(item)}>
        {item.FM_NAME_EN}
        {'\n'}
        {item.GENDER.toUpperCase()}
      </Text>
    );
  };

  const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator
      <View
        style={{
          height: 0.5,
          width: '100%',
          backgroundColor: '#C8C8C8',
        }}
      />
    );
  };

  const getItem = (item) => {
    alert('Name : ' + item.FM_NAME_EN + ' Epic_no : ' + item.EPIC_NO);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <TextInput
          style={styles.textInputStyle}
          onChangeText={(text) => searchFilterFunction(text)}
          value={search}
          underlineColorAndroid="transparent"
          placeholder="Search Here"
        />
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={ItemView}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  itemStyle: {
    padding: 10,
  },
  textInputStyle: {
    height: 40,
    borderWidth: 1,
    paddingLeft: 20,
    margin: 5,
    borderColor: '#009688',
    backgroundColor: '#FFFFFF',
  },
});

export default App;

Answer 1

首先，您必须创建 ItemDetails.js 作为新屏幕的新组件:

import React from 'react';
import {Text, View} from 'react-native';

const ItemDetails= () => {
  return (
    <View>
    <Text>ItemDetails screen</Text>
    </View>
  );
};

export default ItemDetails;

然后，确保安装 react native navigation 并创建一个新屏幕:

 <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="ItemDetails" component={ItemDetails} />
    </Stack.Navigator>

然后回到应用程序组件并将您的 getItem 函数修改为:

   const getItem  = item => {
    navigation.navigate('ItemDetails', {item});
  };

这是你告诉应用程序它必须移动到另一个屏幕的方式，并且你用它发送了特定的项目，现在让我们修改我们的 ItemDetails.js 来查看数据:

const ItemDetails = ({route}) => {
//console.log(route.params) so you can know how to access whatever you want to print
  return (
    <View>
            <Text>{route.params.item.item.FM_NAME_EN}</Text>
    </View>
  );
};