ChargEco/Strides-APP/app/components/ShadowView.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Svg, { Defs, Ellipse, G, LinearGradient, Path, Rect, Stop } from 'react-native-svg';

/**
 * 阴影组件
 * @param {offset} 阴影左右偏移量(配合style实现margin)
 * @returns React Element
 */
const ShadowView = ({
  offset=32,
  style=styles.shadowView,
  shadowColor="#888888"
}) => (
  <View style={style}>
    <Svg width={$vw(100)-offset} height={$vw(4.36)} viewBox="0 0 342 15" fill="none">
      <Path d="M0 0H342V7C342 11.4183 338.418 15 334 15H8.00001C3.58173 15 0 11.4183 0 7V0Z" fill="url(#paint0_linear_4117_1875)"/>
      <Defs>
        <LinearGradient id="paint0_linear_4117_1875" x1="171" y1="15" x2="171" y2="0" gradientUnits="userSpaceOnUse">
          <Stop stopColor="#F9F9F9"/>
          <Stop offset="1" stopColor={shadowColor}/>
        </LinearGradient>
      </Defs>
    </Svg>
  </View>
);

export default ShadowView;

export const ShadowViewV2 = ({
  offset=42,
  style=styles.shadowViewV2,
  shadowColor="#222222"
}) => (
  <View style={style}>
    <Svg width={$vw(100)-offset} height={$vw(4.36)} viewBox="0 0 342 15" fill="none">
      <Path d="M0 0H342V7C342 11.4183 338.418 15 334 15H8.00001C3.58173 15 0 11.4183 0 7V0Z" fill="url(#paint0_linear_4117_1875)"/>
      <Defs>
        <LinearGradient id="paint0_linear_4117_1875" x1="171" y1="15" x2="171" y2="0" gradientUnits="userSpaceOnUse">
          <Stop stopColor="#ddd"/>
          <Stop offset="1" stopColor={shadowColor}/>
        </LinearGradient>
      </Defs>
    </Svg>
  </View>
);

const styles = StyleSheet.create({
  shadowView: {
    opacity: 0.8,
    marginTop: -6,
    marginLeft: 16,
    marginRight: 16
  },
  shadowViewV2: {
    zIndex: 1,
    opacity: .8,
    marginTop: -8,
    marginLeft: 20,
    marginRight: 20
  }
})