React+Taro 微信小程序做一个页面，背景图需贴手机屏幕最上边覆盖展示

话不多说 直接上图

第一步

import { getSystemInfoSync } from '@tarojs/taro';

第二步

render() {
    const cardBanner = getImageUrlByGlobal('member-merge-bg.png');
    const { safeArea, statusBarHeight } = getSystemInfoSync();
    const NAV_BAR_HEIGHT = 44;
    const navBarHeight = NAV_BAR_HEIGHT + (statusBarHeight || safeArea.top);
    const containerStyle = {
      paddingTop: navBarHeight,
      backgroundImage: `url(${cardBanner})`
    };
    return <View className={prefix} style={containerStyle}></View>;
  }

第三步样式

.member-merge{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #f5f5f5;
  background-size: 100% auto;
  background-position: top left;
  background-repeat: no-repeat;
}