【React Native】FlatList——實現帶搜尋欄的列表
阿新 • • 發佈:2019-01-22
實現效果:
實現:
搜尋框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', }, });