react native 毛玻璃效果

最新推荐文章于 2024-03-19 14:58:33 发布

徐同保

最新推荐文章于 2024-03-19 14:58:33 发布

阅读量956

点赞数

分类专栏： web前端文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/xutongbao/article/details/132758974

版权

web前端专栏收录该内容

735 篇文章 15 订阅

订阅专栏

import React from 'react'
import { View, Text, FlatList } from 'react-native'
import { Skeleton } from '@rneui/themed'
import useList from './useList'
import { Image } from '../../../../component/light'
import { BlurView } from 'expo-blur'
import styles from './styles'

export default function Home(props) {
  const { dataSource, isHasMore, handleSearch, handleScroll } =
    useList(props)
  return (
    <View style={styles.mUserlistWrap}>
      <FlatList
        style={styles.mUserlistFlatList}
        data={dataSource}
        onEndReached={() => handleSearch()}
        onScroll={(e) => handleScroll(e)}
        renderItem={({ item }) => (
          <View style={styles.mUserlistRow}>
            <Image uri={item.avatarCdn} style={styles.mUserlistAvatar}></Image>
            <View style={styles.mUserlistNicknameWrap}>
              <Text style={styles.mUserlistNickname}>{item.nickname}</Text>
            </View>
          </View>
        )}
        ListFooterComponent={
          isHasMore ? (
            <View style={styles.mUserlistSkeletonWrap}>
              <Skeleton
                circle
                width={40}
                height={40}
                style={styles.mUserlistSkeletonAvatar}
              />
              <Skeleton
                height={40}
                style={styles.mUserlistSkeletonText}
                animation="wave"
              />
            </View>
          ) : (
            <View style={styles.mUserlistEndTextWrap}>
              <Text style={styles.mUserlistEndText}>已经到底了~</Text>
            </View>
          )
        }
      />
      <BlurView intensity={50} tint="light" style={styles.mUserlistSearchWrap}>
        <Text style={styles.text}>123</Text>
      </BlurView>
    </View>
  )
}