react-native - 在 React Native 中使用 FlatList 实现搜索栏
问题描述
我正在开发一个由 FlatList 组成的 React Native 应用程序。我参考了这篇文章 https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 在我的应用程序中使用 FlatList 组件。
我想实现搜索栏来搜索该列表的内容(使用每个项目的标题)并根据搜索文本自动呈现内容。我如何在不使用任何库的情况下做到这一点?
谢谢你的帮助!
解决方案
检查下面我使用flatlist和TextInput创建的示例。搜索项目时,项目以下拉列表的形式显示。我想这会对你有所帮助。
import React, { Component } from 'react';
import { View, Text, FlatList, TextInput, ListItem } from 'react-native';
class SearchFunction extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
value: '',
};
this.arrayNew = [
{ name: 'Robert' },
{ name: 'Bryan' },
{ name: 'Vicente' },
{ name: 'Tristan' },
{ name: 'Marie' },
{ name: 'Onni' },
{ name: 'sophie' },
{ name: 'Brad' },
{ name: 'Samual' },
{ name: 'Omur' },
{ name: 'Ower' },
{ name: 'Awery' },
{ name: 'Ann' },
{ name: 'Jhone' },
{ name: 'z' },
{ name: 'bb' },
{ name: 'cc' },
{ name: 'd' },
{ name: 'e' },
{ name: 'f' },
{ name: 'g' },
{ name: 'h' },
{ name: 'i' },
{ name: 'j' },
{ name: 'k' },
{ name: 'React' },
{ name: 'React native' },
{ name: 'react navigations' },
];
}
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: '100%',
backgroundColor: '#CED0CE',
}}
/>
);
};
searchItems = text => {
let newData = this.arrayNew.filter(item => {
const itemData = `${item.name.toUpperCase()}`;
const textData = text.toUpperCase();
if(text.length >0 ){
return itemData.indexOf(textData) > -1;
}
});
this.setState({
data: newData,
value: text,
});
};
renderHeader = () => {
return (
<TextInput
style={{ height: 60, borderColor: '#000', borderWidth: 1 }}
placeholder=" Type Name..."
onChangeText={text => this.searchItems(text)}
value={this.state.value}
/>
);
};
render() {
return (
<View
style={{
flex: 1,
padding: 25,
width: '98%',
alignSelf: 'center',
justifyContent: 'center',
}}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<Text style={{ padding: 10 }}>{item.name} </Text>
)}
keyExtractor={item => item.name}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
/>
</View>
);
}
}
export default SearchFunction;
推荐阅读
- vb.net - StreamString(pipeClient) 抛出错误类型未定义
- python - 如何组合具有一组公共列值的多个数据框值?
- reactjs - 如何将带有 :class 的 Vue div 标签中的代码转换为 React 代码?
- r - 如何在 row_spec kable() 中动态指定最后一行的编号?
- c++ - 递归函数调用在幕后工作
- r - Gurobi 的线性和双线性约束
- java - Android:尽管附加了侦听器,但未调用 onSensorChanged()
- python - 使用 for 循环创建新列表
- php - EntityType 表单返回一个字符串而不是对象
- angular - Sweetalert 没有运行,我的 TS 文件出错了