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

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 { 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 link:

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

Answer 2

首先，您必须创建 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>
  );
};

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

How to see the full details of particular member when it is clicked after search?

hybrid-mobile-app

reactjs

mobile-development

react-native

react-native-android