常规用法，单行渲染数据
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.结果如图
