react native 毛玻璃效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了react native 毛玻璃效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>
  )
}

react native 毛玻璃效果,web前端,react native,react.js,javascript