如何在React Native中实现顶部圆角的上半部分背景组件？

以下是可直接落地的实现思路和代码示例：

• 核心设计逻辑：Soft-UI的头部组件核心是低对比度柔和渐变+极弱弥散阴影+底部大圆角的组合，不需要复杂的自定义绘制，用基础组件配合第三方渐变库就能实现，性能开销极低。
• 依赖准备：仅需安装react-native-linear-gradient（实现渐变背景）和react-native-safe-area-context（适配异形屏顶部边距）两个通用库，都是RN生态里使用率极高的稳定依赖。
• 可自定义能力封装：组件默认预留了渐变颜色、高度占比、圆角大小等可配置参数，你可以根据自己的设计需求直接传参调整，也可以自行扩展更多配置项。
• 跨端适配：iOS和Android的阴影效果分别用原生属性实现，不需要额外做平台区分，显示效果和需求参考基本一致。

示例代码 #

import React from 'react';
import { View, StyleSheet, useWindowDimensions } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const SoftProfileHeader = ({
  // 渐变颜色组，可自行修改为适配你项目的色值
  gradientColors = ['#f0e7ff', '#e7f0ff'],
  // 头部高度占屏幕总高度的比例
  heightRatio = 0.25,
  // 底部圆角大小
  borderRadius = 24,
  // 子元素插槽，可传入头像、用户名、简介等内容
  children
}) => {
  const { height: screenHeight } = useWindowDimensions();
  const { top: topInset } = useSafeAreaInsets();
  const headerHeight = screenHeight * heightRatio + topInset;

  return (
    <LinearGradient
      colors={gradientColors}
      style={[
        styles.headerContainer,
        {
          height: headerHeight,
          paddingTop: topInset,
          borderBottomLeftRadius: borderRadius,
          borderBottomRightRadius: borderRadius
        }
      ]}
    >
      {children}
    </LinearGradient>
  )
}

const styles = StyleSheet.create({
  headerContainer: {
    width: '100%',
    // iOS端Soft质感阴影参数
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4
    },
    shadowOpacity: 0.08,
    shadowRadius: 12,
    // Android端阴影参数
    elevation: 7,
    paddingHorizontal: 16
  }
})

export default SoftProfileHeader;

使用方法 #

直接在个人资料页的最外层引入该组件，将你需要放在头部的内容作为子元素传入即可：

// 个人资料页使用示例
const ProfileScreen = () => {
  return (
    <View style={{flex: 1, backgroundColor: '#fff'}}>
      <SoftProfileHeader>
        {/* 这里放你的头像、用户名、简介等内容 */}
      </SoftProfileHeader>
      {/* 这里放个人资料页的下半部分内容 */}
    </View>
  )
}

内容的提问来源于stack exchange，提问作者addd