我该如何在我的React Native应用程序中制作搜索过滤栏

Question

我有一个名为Map的函数组件，其中PDF名称存储在Object中。我在屏幕上显示这些PDF名称，但我想创建一个搜索栏，在那里我可以搜索PDF名称，因为有很多，并根据搜索结果过滤我的结果。有什么办法我能做到这一点吗？我的代码如下所示，所有的pdf名称都存储在{item}中并显示在屏幕上。所以我基本上想搜索存储在该变量中的文本(pdf名称(。请帮忙。

const Map = ({props}) => {
...
return (
<View> 
<List>
{
Object.keys(pdf).map((item)=>
{ 
return(<Text> {item} </Text>)
}
}
</List>
</View>
)
}

Answer 1

假设这是您的PDF数组列表，

pdfList = [
{name: 'Felipe Calderon', year: 2012},
{name: 'Rocio Calderon Martinez', year: 2012},
{name: 'Laura Martinez Calderon', year: 2012},
{name: 'Marcos Alberto Gonzales Calderon', year: 2012}, 
{name: 'Brenda Calderon Ibañez', year: 2012},   
];

您可以创建一个发送搜索查询的函数，例如"Calderon"就是您的搜索查询。

let searchResult = pdfList.filter(({name}) => name.includes('Calderon'));
Console.log(searchResult)

现在使用此搜索结果并更新用于在UI中显示PDF列表的状态数据。

Answer 2

除了这段youtube视频，什么都帮不了我。我会为那些在React Native中创建搜索过滤栏的人保留这篇帖子，因为那段视频完美地完成了我想要的pdf列表。