常規用法，單行渲染資料

1.自定義CKFlatList.js 元件類

 1 import React,{Component} from 'react';
 2 import {
 3     Text,
 4     StyleSheet,
 5     FlatList,
 6     TouchableOpacity,
 7     Dimensions
 8 } from 'react-native';
 9 
10 const screenW=Dimensions.get('window').width;
11 
12 export default class CKFlatList extends Component{
 
13     constructor(){
14         super();
15         //模擬資料來源
16         this.state={
17             dataSource:[
18                 '第一行資料',
19                 '第二行資料',
20                 '第三行資料',
21                 '第四行資料',
22                 '第五行資料',
23                 '第六行資料',
24                 '第七行資料',
 
25                 '第八行資料',
26                 '第九行資料'
27             ]
28         }
29     }
30     render(){
31         return(
32             <FlatList
33                 data={this.state.dataSource}
34                 renderItem={({item,index})=>this._renderRow(item,index)}
35                 keyExtractor={(item,index)=>item+index}
 
36             />
37         )
38     }
39     _renderRow(item,index){
40         return(
41             <TouchableOpacity
42                 style={{
43                     width:screenW,
44                     height:40,
45                     borderBottomWidth:1,
46                     borderBottomColor:'red',
47                     justifyItems:'center',
48                     alignItems:'center'
49                 }}
50             >
51                 <Text>{item}</Text>
52             </TouchableOpacity>
53         )
54     }
55 }
56 
57 const styles=StyleSheet.create({
58 
59 });

2.App.js引用元件

 1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  *
 5  * @format
 6  * @flow strict-local
 7  */
 8 
 9 import React from 'react';
10 import {
11   SafeAreaView,
12   StyleSheet,
13   ScrollView,
14   View,
15   Text,
16   StatusBar,
17 } from 'react-native';
18 
19 import {
20   Header,
21   LearnMoreLinks,
22   Colors,
23   DebugInstructions,
24   ReloadInstructions,
25 } from 'react-native/Libraries/NewAppScreen';
26 
27 import CKFlatList from './components/CKFlatList'
28 
29 
30 const App: () => React$Node = () => {
31 
32   return (
33     <>
34       <StatusBar barStyle="dark-content" />
35       <SafeAreaView style={styles.mainViewStyle}>
36       <CKFlatList/>
37       </SafeAreaView>
38     </>
39   );
40 };
41 
42 
43 const styles=StyleSheet.create({
44   mainViewStyle:{
45       flex:1,
46       backgroundColor:'#fff',
47   }
48 });
49 
50 
51 
52 export default App;

常規用法，多列渲染資料

1.建立自定義CKFlatList.js元件類

 1 import React,{Component} from 'react';
 2 import {
 3     Text,
 4     StyleSheet,
 5     FlatList,
 6     TouchableOpacity,
 7     Dimensions
 8 } from 'react-native';
 9 
10 const screenW=Dimensions.get('window').width;
11 
12 export default class CKFlatList extends Component{
13     constructor(){
14         super();
15         //模擬資料來源
16         this.state={
17             dataSource:[
18                 '第一行資料',
19                 '第二行資料',
20                 '第三行資料',
21                 '第四行資料',
22                 '第五行資料',
23                 '第六行資料',
24                 '第七行資料',
25                 '第八行資料',
26                 '第九行資料',
27                 '第一行資料',
28                 '第二行資料',
29                 '第三行資料',
30                 '第四行資料',
31                 '第五行資料',
32                 '第六行資料',
33                 '第七行資料',
34                 '第八行資料',
35                 '第九行資料'
36             ]
37         }
38     }
39     render(){
40         return(
41             <FlatList
42                 data={this.state.dataSource}
43                 renderItem={({item,index})=>this._renderRow(item,index)}
44                 keyExtractor={(item,index)=>item+index}
45                 style={{
46                     width:screenW,
47                     flexDirection:'row',
48                     flexWrap:'wrap'
49                 }}
50                 numColumns={4}
51             />
52         )
53     }
54     _renderRow(item,index){
55         return(
56             <TouchableOpacity
57                 style={{
58                     width:100,
59                     height:200,
60                     borderBottomWidth:1,
61                     borderBottomColor:'red',
62                     justifyItems:'center',
63                     alignItems:'center'
64                 }}
65                 onPress={()=>alert('點選了第'+(index+1)+'行')}
66             >
67                 <Text>{item}</Text>
68             </TouchableOpacity>
69         )
70     }
71 }
72 
73 const styles=StyleSheet.create({
74 
75 });

2.結果如圖