本文內容
1、flatList的簡單使用
2、flatList屬性的使用、介紹

單個colum.png

多個colum.png

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Animated
} from 'react-native';
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const {width, height} = Dimensions.get('window');

export default class RNProjectTestApp extends Component {

    constructor(props){
        super(props);

        this.state={
            data: [],
            refreshing: false,
        };

        this.renderItem = this.renderItem.bind(this);
        this.separatorComponent = this.separatorComponent.bind(this);
        this.listFooterComponent = this.listFooterComponent.bind(this);
        this.listHeaderComponent = this.listHeaderComponent.bind(this);
    }

    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                data: [
                    {key: '1'},
                    {key: '2'},
                    {key: '3'},
                    {key: '4'},
                    {key: '5'},
                    {key: '6'},
                    {key: '7'},
                    {key: '8'},
                    {key: '9'},
                    {key: '10'},

                ],
            })
        }, 2000)
    }

    /*row*/
    renderItem(item){
        return (
            <View>
              <Text style={{
                  height: 44,
                  lineHeight: 44,
                  width: (width-10*4)/3,
                  marginLeft: 10,
                  backgroundColor: 'blue',
                  color: 'white',
                  textAlign: 'center'}}
              >
                  {item.key}
              </Text>
            </View>
        )
    }
  /*分割線*/
    separatorComponent(){
        return <View style={{height: 1, backgroundColor: 'red'}}/>
    }

  /*底部組件*/
    listFooterComponent(){
        return this.state.data.length !== 0 ? <View>
                <Text style={{alignItems: 'center', textAlign: 'center'}}>我是底部組件</Text>
            </View> : null;
    }

  /*頭部組件*/
    listHeaderComponent(){
        return this.state.data.length !== 0 ? <View>
                    <Text style={{alignItems: 'center', textAlign: 'center'}}>我是頭部組件</Text>
            </View> : null;
    }

  /*沒有數據時顯示的組件*/
    listEmptyComponent() {
        return <View style={{backgroundColor: 'red', flex: 1, height: height}}>
            <Text style={{
                alignItems: 'center',
                textAlign: 'center',
                lineHeight: height,
                color: 'white'}}
            >
                    暫時沒有數據,先等2秒
            </Text>
        </View>
    }

    /*下拉刷新*/
    refresh(){
        this.setState({
            data: [{key: '你好'}, {key: '再見'}],
            refreshing: true,
        });

        setTimeout(()=>{
            this.setState({
                refreshing: false,
            })
        },2000);

    }
    render() {
        return (
           <View style={{flex: 1}}>
               <FlatList style={{marginTop: 20}}
                   ref="flatList"
                   extraData={this.state}
                   keyExtractor={(item, index) => String(index) }
                   data={this.state.data} // 數據
                   renderItem={({item}) => this.renderItem(item)} // row
                   ItemSeparatorComponent={this.separatorComponent} // 分割線
                   horizontal={false} // 水平還是垂直
                   ListFooterComponent={this.listFooterComponent} // 底部組件
                   ListHeaderComponent={this.listHeaderComponent} // 頭部組件
                   ListEmptyComponent={this.listEmptyComponent} // 沒有數據時顯示的界面
                   refreshing={this.state.refreshing} // 是否刷新 ，自帶刷新控件
                   onRefresh={()=>{
                      this.refresh();
                   }} // 刷新方法,寫了此方法，下拉才會出現  刷新控件，使用此方法必須寫 refreshing
                   numColumns ={3} // 指定多少列  等于 1 的時候，不能寫 columnWrapperStyle
                   columnWrapperStyle={{borderWidth:2, borderColor:'black'}} // 一整行的row設置樣式
               />
               <TouchableOpacity onPress={()=>{
                   {/*this.refs.flatList.scrollToEnd(); // 滾動到底部*/}
                   this.refs.flatList.scrollToOffset({animated: true, offset: 200}); // 滾動到某一個位置

                   {
                       /*
                        scrollToEnd ({params?: ?{animated?: ?boolean}})：滾動到末尾，如果不設置getItemLayout屬性的話，可能會比較卡。
                        scrollToIndex (params: {animated?: ?boolean, index: number, viewPosition?: number})：滾動到制定的位置
                        scrollToOffset (params: {animated?: ?boolean, offset: number})：滾動到指定的偏移的位置。
                       */
                   }
               }}>
                   <Text style={{textAlign: 'center'}}>點擊跳轉</Text>
               </TouchableOpacity>
           </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('RNProjectTestApp', () => RNProjectTestApp);

QQ20170824-141956.gif