【React Native】实现搜索栏+列表

实现效果：

实现：

搜索框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>
					</View>
				</View>
			</TouchableOpacity>
		)
	};

	//行间分割线
	_separator = () => {
		return <View style={{height:1, backgroundColor:'#7b7b7b'}}/>
	};

	render(){
		var data = [
			{
				title:'千佛山徒步',
				time:'开始时间：2016-07-10 09:00',
				distance:'34.1公里 耗时：02:30 兴趣点：3',
			},
			{
				title:'趵突泉游览',
				time:'开始时间：2016-06-10 10:16',
				distance:'20公里 耗时：03:20 兴趣点：10',
			},
			{
				title:'大明湖观光',
				time:'开始时间：2016-05-26 09:10',
				distance:'20.7公里 耗时：05:29 兴趣点：21',
			},
			{
				title:'动物园一日游',
				time:'开始时间：2016-05-10 09:10',
				distance:'7公里 耗时：05:29 兴趣点：11',
			},
		];

		return(
			<View style={styles.container}>
				<StatusBar
					animated={true}
					hidden={false}
					backgroundColor={'transparent'}
					translucent={false}
					barStyle={'light-content'}
				>
				</StatusBar>

				<View style={styles.searchBox}>
					<Image
						source={require('./image/search.png')}
						style={styles.searchIcon}>
					</Image>
					<TextInput
						style={styles.inputText}
						autoCapitalize='none'  //设置首字母不自动大写
						underlineColorAndroid={"transparent"}  //下划线颜色设置为透明
						placeholderTextColor={'#aaa'}  //设置占位符颜色
						placeholder={"搜索轨迹名称"}
					/>
				</View>
				<View ItemSeparatorComponent={this._separator}/>
				<View style={styles.trailList}>
					<FlatList
						ref = {(flatList)=>this._flatList = flatList}
						ItemSeparatorComponent={this._separator}
						renderItem={this._renderItem}
						data={data}
					>
					</FlatList>
				</View>
			</View>
		);
	}
}
const styles= StyleSheet.create({
	container:{
		flexDirection:'column',
		flex:1,
		paddingTop:27,
		paddingBottom:5,
		marginBottom:5,
		alignItems:'center',
		backgroundColor:'#fff',
		borderBottomWidth:StyleSheet.hairlineWidth,
		borderBottomColor:'#cdcdcd',
	},
	searchBox: {
		flex: 1,
		height: 35,
		marginLeft: 10,
		marginRight: 10,
		marginBottom: 5,
		flexDirection: 'row',
		backgroundColor: '#E6E7E8',
		borderRadius:5,
	},
	searchIcon: {
		alignSelf:'center',
		marginLeft:7,
		marginRight:7,
		width:18,
		height:18,
	},
	inputText: {
		alignSelf:'center',
		marginTop:0,
		flex:1,
		height:30,
		marginLeft: 5,
		marginRight: 5,
		fontSize: 18,
		lineHeight: 30,
		textAlignVertical: 'center',
		textDecorationLine: 'none'
	},
	trailList: {
		flex:20,
		width:400,
		height:100,
		marginLeft: 5,
		marginRight: 5,
	},
	txt: {
		textAlign:'center',
		textAlignVertical: 'center',
		color: '#0d0d0d',
		fontSize: 30,
		flex:1,
		height:180,
		backgroundColor:'#fff',
	},
	itemList: {
		flexDirection:'row',
		flex:1,
		marginLeft:5,
		paddingBottom:5,
		paddingTop:5,
	},
	itemContainer: {
		flex:4.1,
		marginLeft:5,
		justifyContent:'center',
	},
	itemImage: {
		height:80,
		width:80,
		flex:1,
		alignItems:'center',
		paddingTop:5,
		paddingBottom:5,
		paddingRight:5,
	},
	itemTitle: {
		fontSize:15,
		color:'#42a5cb',
		fontWeight:'700',
	},
});