1- import React , { useRef , useState } from 'react' ;
2- import { SafeAreaView } from 'react-native' ;
3- import { QuickList , List } from '@uiw/react-native' ;
4- import { ComProps } from '../../routes' ;
1+ import React , { useRef , useState } from 'react' ;
2+ import { SafeAreaView , Image , View , Text } from 'react-native' ;
3+ import { QuickList , List } from '@uiw/react-native' ;
4+ import { ComProps } from '../../routes' ;
55import Layout from '../../Layout' ;
6- const { Header} = Layout ;
6+ const { Header } = Layout ;
77
8- export interface ListViewProps extends ComProps { }
8+ export interface ListViewProps extends ComProps { }
99
1010interface fethProp {
1111 page : number ;
1212 pageSize : number ;
1313}
14-
15- const defaultData : Array < { name : string ; id : number } > = [
16- { name : '最好用的快速List列表 ' , id : 1 } ,
17- { name : '最好用的快速List列表 ' , id : 2 } ,
18- { name : '最好用的快速List列表 ' , id : 3 } ,
19- { name : '最好用的快速List列表 ' , id : 4 } ,
20- { name : '最好用的快速List列表 ' , id : 5 } ,
21- { name : '最好用的快速List列表 ' , id : 6 } ,
22- { name : '最好用的快速List列表 ' , id : 7 } ,
23- { name : '最好用的快速List列表 ' , id : 8 } ,
24- { name : '最好用的快速List列表 ' , id : 9 } ,
25- { name : '最好用的快速List列表 ' , id : 10 } ,
14+ const imageUrl = 'https://c-ssl.duitang.com/uploads/item/202004/13/20200413013923_25wds.jpeg'
15+ const defaultData : Array < { name : string ; id : number ; img : string } > = [
16+ { name : '@uiw/react-native QuickList ' , id : 1 , img : imageUrl } ,
17+ { name : '@uiw/react-native QuickList ' , id : 2 , img : imageUrl } ,
18+ { name : '@uiw/react-native QuickList ' , id : 3 , img : imageUrl } ,
19+ { name : '@uiw/react-native QuickList ' , id : 4 , img : imageUrl } ,
20+ { name : '@uiw/react-native QuickList ' , id : 5 , img : imageUrl } ,
21+ { name : '@uiw/react-native QuickList ' , id : 6 , img : imageUrl } ,
22+ { name : '@uiw/react-native QuickList ' , id : 7 , img : imageUrl } ,
23+ { name : '@uiw/react-native QuickList ' , id : 8 , img : imageUrl } ,
24+ { name : '@uiw/react-native QuickList ' , id : 9 , img : imageUrl } ,
25+ { name : '@uiw/react-native QuickList ' , id : 10 , img : imageUrl } ,
2626] ;
2727
2828const QuickListView = ( props : ListViewProps ) => {
2929 const baseRef = useRef ( ) ;
30- const { route} = props ;
30+ const { route } = props ;
3131 const description = route . params . description ;
3232 const title = route . params . title ;
3333 const [ total , setTotal ] = useState ( 0 ) ;
34- const [ data , setData ] = useState < Array < { name : string ; id : number } > > ( [ ] ) ;
34+ const [ data , setData ] = useState < Array < { name : string ; id : number ; img : string } > > ( [ ] ) ;
3535
3636 const sleep = ( time : any ) =>
3737 new Promise ( resolve => setTimeout ( ( ) => resolve ( '' ) , time ) ) ;
3838 // 模拟请求
3939 const fethList = async ( params : fethProp ) => {
40- const { page, pageSize} = params ;
40+ const { page, pageSize } = params ;
4141 if ( page === 1 ) {
4242 await sleep ( 500 ) ;
4343 setData ( defaultData ) ;
4444 } else {
4545 let fetchData = [ ] ;
4646 for ( let i = 0 ; i < pageSize ; i ++ ) {
4747 const id = data . length + ( 1 / 10 ) * pageSize + i ;
48- const name = '最好用的快速List列表' ;
49- let obj = { name, id} ;
48+ const name = '@uiw/react-native QuickList' ;
49+ const img = imageUrl
50+ let obj = { name, id, img } ;
5051 fetchData . push ( obj ) ;
5152 }
5253 let newData = [ ...data , ...fetchData ] ;
@@ -56,20 +57,35 @@ const QuickListView = (props: ListViewProps) => {
5657 setTotal ( 40 ) ;
5758 } ;
5859
60+ const ListItem = ( item :any ) => {
61+ return (
62+ < List flat = { false } >
63+ < View
64+ style = { { padding : 10 , display : "flex" , alignItems : "center" , flexDirection : "row" } } >
65+ < Image
66+ source = { {
67+ uri : item . img ,
68+ } }
69+ style = { { height : 70 , width : 70 , borderRadius : 50 } }
70+ />
71+ < View style = { { marginLeft : 10 } } >
72+ < Text style = { { marginBottom : 5 , fontSize : 18 } } > react-native</ Text >
73+ < Text style = { { color :"#808080" } } > { item . name } </ Text >
74+ </ View >
75+ </ View >
76+ </ List >
77+ )
78+ }
79+
5980 return (
60- < SafeAreaView style = { { flex : 1 } } >
81+ < SafeAreaView style = { { flex : 1 } } >
6182 < Header title = { title } description = { description } />
6283 < QuickList
6384 ref = { baseRef }
6485 onFetch = { fethList }
6586 data = { data }
6687 total = { total }
67- renderItem = { ( { item} ) => (
68- < List flat = { false } >
69- < List . Item
70- style = { { height : 70 } } > { `${ item . id } ${ item . name } } </ List . Item >
71- </ List >
72- ) }
88+ renderItem = { ( { item } ) => ListItem ( item ) }
7389 keyId = "id"
7490 />
7591 </ SafeAreaView >
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4&size=40){kind=avatar}
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments