ReactNative 进阶（四十一）：应用 FlatList 实现分组列表

<FlatList  data={Details}  keyExtractor={(item, index) => index}  renderItem={this._renderItem(data)}  ListEmptyComponent={()=>{return(<Text style={styles.LookMoreStyle}>暂无记录</Text>)}}  // getItemLayout={(data,index)=>(  //     {length: AdaptationModel.scaleHeight(46), offset:AdaptationModel.scaleHeight(46) * index, index}  //     )}/>
 _renderItem(data){    return <View style={styles.item}>          <Text style={styles.text}>{data.item}</Text>    </View>  }
const styles = StyleSheet.create({ LookMoreStyle: {        height: 32,        width: AppSetting.ScreenWidth,        textAlign: 'center',        fontSize: AdaptationModel.setSpText(12),        paddingTop: 10,        backgroundColor: AppSetting.GRAY    },    item:{    backgroundColor: '#168',    height:200,    marginRight:15,    marginLeft:15,    marginBottom:15,    alignItems:'center',    //justifyContetnt:'center',  },})

const {width,height}=Dimensions.get('window')export default class Main extends Component{  // 构造  constructor(props) {    super(props);  }  refreshing(){    let timer = setTimeout(()=>{          clearTimeout(timer)          alert('刷新成功')        },1500)  }  _onload(){    let timer = setTimeout(()=>{      clearTimeout(timer)      alert('加载成功')    },1500)  }  render() {    var data = [];    for (var i = 0; i < 100; i++) {      data.push({key: i, title: i + ''});    }
    return (      <View style={{flex:1}}>        <Button title='滚动到指定位置' onPress={()=>{          this._flatList.scrollToOffset({animated: true, offset: 2000});        }}/>        <View style={{flex:1}}>          <FlatList            ref={(flatList)=>this._flatList = flatList}            ListHeaderComponent={this._header}            ListFooterComponent={this._footer}            ItemSeparatorComponent={this._separator}            renderItem={this._renderItem}            onRefresh={this.refreshing}            refreshing={false}            onEndReachedThreshold={0}            onEndReached={              this._onload            }            numColumns ={3}            columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}
            //horizontal={true}
            getItemLayout={(data,index)=>(            {length: 100, offset: (100+2) * index, index}            )}
            data={data}>          </FlatList>        </View>
      </View>    );  }
  _renderItem = (item) => {    var txt = '第' + item.index + '个' + ' title=' + item.item.title;    var bgColor = item.index % 2 == 0 ? 'red' : 'blue';    return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>  }
  _header = () => {    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>;  }
  _footer = () => {    return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>;  }
  _separator = () => {    return <View style={{height:2,backgroundColor:'yellow'}}/>;  }
}const styles=StyleSheet.create({  container:{
  },  content:{    width:width,    height:height,    backgroundColor:'yellow',    justifyContent:'center',    alignItems:'center'  },  cell:{    height:100,    backgroundColor:'purple',    alignItems:'center',    justifyContent:'center',    borderBottomColor:'#ececec',    borderBottomWidth:1
  },  txt: {    textAlign: 'center',    textAlignVertical: 'center',    color: 'white',    fontSize: 30,  }
})

DeviceEventEmitter.emit('自定义名称',发送数据);

DeviceEventEmitter.addListener('名称',(events) ={使用数据events});

import {DeviceEventEmitter} from 'react-native';let param = {taobaoBind:false,walletSum:0.00,couponNum:0}DeviceEventEmitter.emit('meeting_receive’,param);  //发送消息，并携带param参数

componentDidMount() {     //页面加载完毕，开启监听消息   this.eventMeetingReceive =DeviceEventEmitter.addListener('meeting_receive',        (events) =>{this.setState({walletSum : events.walletSum});});}
componentWillUnmount() {     //当页面销毁时，移除事件的监听  this.eventMeetingReceive.remove();}