【React Native】FlatList——实现带搜索栏的列表

FloraCat_染小白

于 2018-07-12 14:51:23 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.youkuaiyun.com/u014322206/article/details/81015584

版权

本文介绍了如何在React Native中使用FlatList组件结合搜索框InputBox实现带搜索功能的列表。通过示例代码展示了如何将搜索功能与列表数据动态过滤，达到实时搜索的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

实现：

搜索框InputBox

列表：FlatList

代码：

import React, { Component } from 'react';
import {
	View,
	TextInput,
	FlatList,
	StyleSheet,
	StatusBar,
	Text,
	Image,
	TouchableOpacity
} from 'react-native';


export default class App extends Component {
	_flatList;

	//渲染每一行数据为text组件
	_renderItem = (item) => {
		return (
			<TouchableOpacity style={styles.itemList}>
				<Image source={require('./image/bike.png')} style={styles.itemImage}/>
				<View style={styles.itemContainer}>
					<Text style={styles.itemTitle}>{item.item.title}</Text>
					<View>
						<Text>{item.item.time}</Text>
						<Text>{item.item.distance}</Text&g

最低0.47元/天解锁文章