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