react native列表视图FlatList

import React, {
    
    Component} from 'react';
import {
    
    Platform, StyleSheet, Text, View,Image,FlatList,RefreshControl} from 'react-native';
export default class Flat extends Component {
    
    
    constructor(props) {
    
    
        super(props)
        this.state = {
    
    
          //下拉判断初始化
            refreshing:false,
          //数据初始化
            movieData:[],
          //显示开关初始化
            buffer:false
        }
    }
  // 下拉刷新事件
  _onRefresh=()=>{
    
    
    this.setState({
    
    
      refreshing:true
    })
    //模拟通过网络接口请求数据
    setTimeout(()=>{
    
    
       console.log(111)
      //关闭刷新指示器
      this.setState({
    
    
        refreshing:false,
      })
    },2000)
  }
  // 加载完毕调用请求数据的方法
  componentDidMount(){
    
    
    this.getMoviesFromApiAsync()
  }
  // 网络请求获取电影数据
  getMoviesFromApiAsync=()=> {
    
    
    return fetch('https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json')
      .then((response) => response.json())
      .then((responseJson) => {
    
    
        this.setState({
    
    
          //数据赋值
          movieData:responseJson.movies,
          //修改开关
          buffer:true
        })
      })
      .catch((error) => {
    
    
        console.error(error);
      });
  }
  // 定义组装列表中的数据，{item,index}都是组件自己封装好的需要传入的东西
  // 该方法相当自动循环了，item相当于data数据中通过循环后的每一项，如{title:"lisi",name:"ss",age:14}
  _renderItem=({
    
    item,index})=>{
    
    
        return (
            <View key={
    
    index} style={
    
    styles.box}>
                <Image source={
    
    {
    
    uri:item.posters.thumbnail}} style={
    
    styles.img} />
                <View style={
    
    styles.text}>
                    <Text
                      onPress={
    
    ()=>{
    
    
                        var object=this.refs.flatlist
                        //scrollToIndex()  跳转animated:是否显示滑动的动画效果 
                        // viewPosition滑动后的目标位置 0:顶部  0.5中间  1底部  
                        // index:要滑动的数据
                        object.scrollToIndex({
    
    animated:true,viewPosition:0.5,index:index});
                      }}
                    >{
    
    item.title}</Text>
                    <Text>{
    
    item.year}</Text>
                </View>
            </View>
        )
  } 
  //定义列表头部组件
  _ListHeaderComponent=()=>{
    
    
      return(
        <View style={
    
    {
    
    height:50,width:'100%',justifyContent:"center",alignItems:"center"}}>
          <Text style={
    
    {
    
    color:"red",fontSize:25}}>欢迎来到电影资讯广场</Text>
        </View>
      )
  }
  //定义列底部组件
  _ListFooterComponent=()=>{
    
    
      return(
        <View style={
    
    {
    
    height:50,width:'100%',justifyContent:"center",alignItems:"center"}}>
          <Text style={
    
    {
    
    color:"purple",fontSize:25}}>更多电影资讯敬请期待...</Text>
        </View>
      )
  }
  //定义分割线
  _ItemSeparatorComponent=()=>{
    
    
      return(
        <View style={
    
    {
    
    height:3,backgroundColor:'skyblue'}}></View>
      )
  }
    //当列表为空时渲染该组件
  _ListEmptyComponent=()=>{
    
    
    return(
      <View style={
    
    {
    
    height:500,justifyContent:"center",alignItems:"center"}}>
        <Text style={
    
    {
    
    color:'red',fontSize:30}}>
          数据加载中...loading....
        </Text>
      </View>
    )
  }
  render() {
    
    
    let {
    
    movieData,buffer}=this.state
    if (!buffer){
    
    //还没有请求到数据时显示这个组件
      return this._ListEmptyComponent()
    }
    else {
    
    //拿到数据后显示
      return (
        <FlatList
          // 用ref获取当前的组件
          ref="flatlist"
          // data需要遍历展示的电影数据,这里data里面的数据格式是数组里面套对象
          data={
    
    movieData}
          // 遍历组装data中的列表数据，通过方法getMovie
          renderItem={
    
    this._renderItem}
          // 生成key
          keyExtractor={
    
    item=>item.id}
          // 头部组件
          ListHeaderComponent={
    
    this._ListHeaderComponent}
          // 底部组件
          ListFooterComponent={
    
    this._ListFooterComponent}
          //定义行与行之间的分割线
          ItemSeparatorComponent={
    
    this._ItemSeparatorComponent}
          //水平布局
          // horizontal
          //多列布局
          // numColumns={4}
          //下拉刷新
          refreshControl={
    
    
            <RefreshControl
              refreshing={
    
    this.state.refreshing}
              onRefresh={
    
    this._onRefresh}
            />
          }
        />
      )
    }
  }
}

const styles=StyleSheet.create({
    
    
    box:{
    
    
        flexDirection:"row",
        marginTop:5,
        borderWidth:1,
        borderColor:"#ddd"
    },
    img:{
    
    
        width:80,
        height:110,
        backgroundColor:"#ddd"
    },
    text:{
    
    
        flex:1,
        justifyContent:"center",
        alignItems:"center"
    }
})