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