react native 自定义FlatList常用组件

项目中常常有到的 左侧图片右侧是多行文字的列表，利用 FlatList组件自定义组件。

1.创建自定义CKWineList.js组件

复制代码
  1 import React,{Component} from 'react';
  2 import {
  3     Text,
  4     StyleSheet,
  5     FlatList,
  6     TouchableOpacity,
  7     Image,
  8     View,
  9     Dimensions
 10 } from 'react-native';
 11 
 12 import CKSwiper from './../components/CKSwiper';
 13 
 14 const screenW=Dimensions.get('window').width;
 15 
 16 //1.引入本地数据
 17 const wineArr=[
 18     {
 19         "image":"https://hrbrzyk.com/img/banner1.jpg",
 20         "money":"92",
 21         "name":"百加得黑朗姆  烈酒 750ml"
 22     },
 23     {
 24         "image":"https://hrbrzyk.com/img/banner1.jpg",
 25         "money":"92",
 26         "name":"百加得黑朗姆  烈酒 750ml"
 27     },
 28     {
 29         "image":"https://hrbrzyk.com/img/banner1.jpg",
 30         "money":"92",
 31         "name":"百加得黑朗姆  烈酒 750ml"
 32     },
 33     {
 34         "image":"https://hrbrzyk.com/img/banner1.jpg",
 35         "money":"92",
 36         "name":"百加得黑朗姆  烈酒 750ml"
 37     },
 38     {
 39         "image":"https://hrbrzyk.com/img/banner1.jpg",
 40         "money":"92",
 41         "name":"百加得黑朗姆  烈酒 750ml"
 42     },
 43     {
 44         "image":"https://hrbrzyk.com/img/banner1.jpg",
 45         "money":"92",
 46         "name":"百加得黑朗姆  烈酒 750ml"
 47     },
 48     {
 49         "image":"https://hrbrzyk.com/img/banner1.jpg",
 50         "money":"92",
 51         "name":"百加得黑朗姆  烈酒 750ml"
 52     },
 53     {
 54         "image":"https://hrbrzyk.com/img/banner1.jpg",
 55         "money":"92",
 56         "name":"百加得黑朗姆  烈酒 750ml"
 57     }
 58 ];
 59 
 60 export default class CKWineList extends Component{
 61     constructor(){
 62         super();
 63         this.state={
 64             dataSource:wineArr
 65         }
 66     }
 67     render(){
 68         return(
 69             <FlatList
 70                 //标题
 71                 ListHeaderComponent={()=>(
 72                     <CKSwiper/>
 73                 )}
 74                 //结尾
 75                 ListFooterComponent={()=>(
 76                     <View>
 77                         <Image
 78                             source={require('./../accets/images/mine.png')}
 79                             style={{width:screenW,height:100}}
 80                         />
 81                     </View>
 82                 )}
 83                 data={this.state.dataSource}
 84                 renderItem={({item,index})=>this._renderRow(item,index)}
 85                 keyExtractor={(item,index)=>item+index}
 86             />
 87         )
 88     }
 89 
 90     _renderRow(rowData,rowID){
 91         return(
 92             <TouchableOpacity
 93                 style={{
 94                     flexDirection:'row',
 95                     borderBottomWidth:1,
 96                     borderBottomColor:'#e8e8e8',
 97                     padding:10
 98                 }}
 99             >
100                 {/*左边*/}
101                 <Image
102                     source={{uri:rowData.image}}
103                     style={{width:80,height:80,backgroundColor:'red'}}
104                 />
105                 {/*右边*/}
106                 <View style={{
107                     flex:1,
108                     marginLeft:10,
109                     marginRight:10,
110                     justifyContent:'space-around'
111                 }}
112                 >
113                     <Text
114                         numberOfLines={2}
115                         style={{fontsize:18}}
116                     >{rowData.name}</Text>
117                     <Text>￥{rowData.money}</Text>
118                 </View>
119             </TouchableOpacity>
120         )
121     }
122 
123 }
124 
125 //样式
126 const styles=StyleSheet.create({
127 
128 })
复制代码

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 CKWineList from './components/CKWineList'
28 
29 const App: () => React$Node = () => {
30 
31   return (
32     <>
33       <StatusBar barStyle="dark-content" />
34       <SafeAreaView style={styles.mainViewStyle}>
35       <CKWineList/>
36       </SafeAreaView>
37     </>
38   );
39 };
40 
41 
42 const styles=StyleSheet.create({
43   mainViewStyle:{
44       flex:1,
45       backgroundColor:'#fff',
46   }
47 });
48 
49 
50 
51 export default App;
复制代码

3.结果如图

 

 

 

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

import CKSwiper from './../components/CKSwiper';

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

//1.引入本地数据
const wineArr=[
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    },
    {
        "image":"https://hrbrzyk.com/img/banner1.jpg",
        "money":"92",
        "name":"百加得黑朗姆  烈酒 750ml"
    }
];

export default class CKWineList extends Component{
    constructor(){
        super();
        this.state={
            dataSource:wineArr
        }
    }
    render(){
        return(
            <FlatList
                //标题
                ListHeaderComponent={()=>(
                    <CKSwiper/>
                )}
                //结尾
                ListFooterComponent={()=>(
                    <View>
                        <Image
                            source={require('./../accets/images/mine.png')}
                            style={{width:screenW,height:100}}
                        />
                    </View>
                )}
                data={this.state.dataSource}
                renderItem={({item,index})=>this._renderRow(item,index)}
                keyExtractor={(item,index)=>item+index}
            />
        )
    }

    _renderRow(rowData,rowID){
        return(
            <TouchableOpacity
                style={{
                    flexDirection:'row',
                    borderBottomWidth:1,
                    borderBottomColor:'#e8e8e8',
                    padding:10
                }}
            >
                {/*左边*/}
                <Image
                    source={{uri:rowData.image}}
                    style={{width:80,height:80,backgroundColor:'red'}}
                />
                {/*右边*/}
                <View style={{
                    flex:1,
                    marginLeft:10,
                    marginRight:10,
                    justifyContent:'space-around'
                }}
                >
                    <Text
                        numberOfLines={2}
                        style={{fontsize:18}}
                    >{rowData.name}</Text>
                    <Text>￥{rowData.money}</Text>
                </View>
            </TouchableOpacity>
        )
    }

}

//样式
const styles=StyleSheet.create({

})
posted @   创客未来  阅读(275)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示