如何在搜索后点击特定成员的完整详细信息？

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

Answer 2

如果我正确理解了您的问题，您需要另一条路线：

首先，为新页面创建一个显示详细信息的组件：

ItemDetails.js：

import { useParams } from 'react-router-dom' //You will get the params from the url
import {useState, useEffect} from 'react'

export const ItemDetails = props => {
  const { id } = useParams()
  
  const [item, setItem] = useState(null)
  useEffect(() => {
    if(id){
      const itemSelected = /* get your item by id */
      setItem(itemSelected)
    }
  }, [id])

  return(
   <p> {item.name} </p>
   )
}

无论您在哪里定义路线：

import {ItemDetails} from './path/to/ItemDetails/'

<Switch>
   ...
   <Route exact path="/item/:id" component={ItemDetails} />
   ...
<Switch>

最后，用 react-router 链接包装你的 jsx：

import { Link } from 'react-router-dom'

...
return (
   <Link to={`/item/${item.id}`}>
      <Text
        style={styles.itemStyle}
        {item.FM_NAME_EN}
        {'\n'}
        {item.GENDER.toUpperCase()}
      </Text>
    </Link>
    );