react native 之 FlatList基本使用

常規用法，單行渲染數據

1.自定義CKFlatList.js 組件類

import React,{Component} from 'react';
import {
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    Dimensions
} from 'react-native';

const screenW=Dimensions.get('window').width;//獲取屏幕寬度

export default class CKFlatList extends Component{
    constructor(){
        super();
        //模擬數據源
        this.state={
            dataSource:[
                '第一行數據',
                '第二行數據',
                '第三行數據',
                '第四行數據',
                '第五行數據',
                '第六行數據',
                '第七行數據',
                '第八行數據',
                '第九行數據'
            ]
        }
    }
    render(){
        return(
            <FlatList
                data={this.state.dataSource}
                renderItem={({item,index})=>this._renderRow(item,index)}
                keyExtractor={(item,index)=>item+index}
            />
        )
    }
    _renderRow(item,index){
        return(
            <TouchableOpacity
                style={{
                    width:screenW,
                    height:40,
                    borderBottomWidth:1,
                    borderBottomColor:'red',
                    justifyItems:'center',
                    alignItems:'center'
                }}
            >
                <Text>{item}</Text>
            </TouchableOpacity>
        )
    }
}

const styles=StyleSheet.create({

});

2.App.js引用組件

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

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import CKFlatList from './components/CKFlatList'


const App: () => React$Node = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.mainViewStyle}>
      <CKFlatList/>
      </SafeAreaView>
    </>
  );
};


const styles=StyleSheet.create({
  mainViewStyle:{
      flex:1,
      backgroundColor:'#fff',
  }
});



export default App;

常規用法，多列渲染數據

1.創建自定義CKFlatList.js組件類

import React,{Component} from 'react';
import {
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    Dimensions
} from 'react-native';

const screenW=Dimensions.get('window').width;

export default class CKFlatList extends Component{
    constructor(){
        super();
        //模擬數據源
        this.state={
            dataSource:[
                '第一行數據',
                '第二行數據',
                '第三行數據',
                '第四行數據',
                '第五行數據',
                '第六行數據',
                '第七行數據',
                '第八行數據',
                '第九行數據',
                '第一行數據',
                '第二行數據',
                '第三行數據',
                '第四行數據',
                '第五行數據',
                '第六行數據',
                '第七行數據',
                '第八行數據',
                '第九行數據'
            ]
        }
    }
    render(){
        return(
            <FlatList
                data={this.state.dataSource}
                renderItem={({item,index})=>this._renderRow(item,index)}
                keyExtractor={(item,index)=>item+index}
                style={{
                    width:screenW,
                    flexDirection:'row',
                    flexWrap:'wrap'
                }}
                numColumns={4}
            />
        )
    }
    _renderRow(item,index){
        return(
            <TouchableOpacity
                style={{
                    width:100,
                    height:200,
                    borderBottomWidth:1,
                    borderBottomColor:'red',
                    justifyItems:'center',
                    alignItems:'center'
                }}
                onPress={()=>alert('點擊了第'+(index+1)+'行')}
            >
                <Text>{item}</Text>
            </TouchableOpacity>
        )
    }
}

const styles=StyleSheet.create({

});

2.結果如圖