1import React, {memo} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import Config from '@/core/config'; 4import {ImgAsset} from '@/constants/assetsConst'; 5import Image from './image'; 6import useColors from '@/hooks/useColors'; 7 8function PageBackground() { 9 const themeConfig = Config.useConfig('setting.theme'); 10 const colors = useColors(); 11 12 return ( 13 <> 14 <View 15 style={[ 16 style.wrapper, 17 { 18 backgroundColor: 19 colors?.pageBackground ?? colors.background, 20 }, 21 ]} 22 /> 23 <Image 24 uri={themeConfig?.background} 25 emptySrc={ImgAsset.backgroundDefault} 26 style={[ 27 style.wrapper, 28 { 29 opacity: themeConfig?.backgroundOpacity ?? 0.7, 30 }, 31 ]} 32 blurRadius={themeConfig?.backgroundBlur ?? 20} 33 /> 34 </> 35 ); 36} 37export default memo(PageBackground, () => true); 38 39const style = StyleSheet.create({ 40 wrapper: { 41 position: 'absolute', 42 top: 0, 43 left: 0, 44 right: 0, 45 bottom: 0, 46 width: '100%', 47 height: '100%', 48 }, 49}); 50