Ios 将本机阴影反射到顶部，以给出；“货架”；相同结果

我正在尝试使用react native shadow重新创建下图。如您所见，使用阴影时，图像对象似乎位于白色书架的顶部

这是我的尝试。但我的努力不够短，因为顶部阴影更像是黑点，而不是像从上面的渐变。有什么建议吗？谢谢

const CollectionScreen=（）=>{
返回(
);
}
const styles=StyleSheet.create({
货架：{
宽度：1242，
身高：25，
边界半径：5，
背景颜色：“白色”，
位置：'绝对'，
前200名，
阴影颜色：“000”，
阴影偏移：{
宽度：3，
身高：-5，
},
阴影不透明度：0.25，
阴影半径：10，
玛金托普：3
}
})

以下是我的尝试。我添加了一个浅灰色框来表示书架的顶部，以及在底部的“书”下添加了一条带阴影的线，以复制只落在书架上的阴影

export default function App() {
  return (
    <View>
      <View style={styles.shelf} />
      <View style={styles.shelfTop} />
      <View
      style={{
          backgroundColor: 'black',
          width: 100,
          height: 5,
          position: 'absolute',
          top: 190,
          left: 100,
          shadowColor: '#000',
          shadowOffset: {
            width: 3,
            height: 5,
          },
          shadowOpacity: 0.50,
          shadowRadius: 5,
        }}
      />
      <View
        style={{
          backgroundColor: 'black',
          width: 100,
          height: 100,
          position: 'absolute',
          top: 95,
          left: 100,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  shelfTop: {
    width: 1242,
    height: 25,
    position: 'absolute',
    top: 180,
    backgroundColor: '#F5F5F5',
  },
  shelf: {
    width: 1242,
    height: 25,
    borderRadius: 5,
    backgroundColor: 'white',
    position: 'absolute',
    top: 200,
    shadowColor: '#000',
    shadowOffset: {
      width: 3,
      height: 5,
    },
    shadowOpacity: 0.25,
    shadowRadius: 20,
    marginTop: 3,
  },
});

导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
谢尔夫托普：{
宽度：1242，
身高：25，
位置：'绝对'，
排名：180，
背景颜色：'#f5'，
},
货架：{
宽度：1242，
身高：25，
边界半径：5，
背景颜色：“白色”，
位置：'绝对'，
前200名，
阴影颜色：“#000”，
阴影偏移：{
宽度：3，
身高:5,，
},
阴影不透明度：0.25，
阴影半径：20，
玛金托普：3，
},
});

除了在shelfTop中键入“position”之外，它的工作方式就像一个符咒。认可的。谢谢

export default function App() {
  return (
    <View>
      <View style={styles.shelf} />
      <View style={styles.shelfTop} />
      <View
      style={{
          backgroundColor: 'black',
          width: 100,
          height: 5,
          position: 'absolute',
          top: 190,
          left: 100,
          shadowColor: '#000',
          shadowOffset: {
            width: 3,
            height: 5,
          },
          shadowOpacity: 0.50,
          shadowRadius: 5,
        }}
      />
      <View
        style={{
          backgroundColor: 'black',
          width: 100,
          height: 100,
          position: 'absolute',
          top: 95,
          left: 100,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  shelfTop: {
    width: 1242,
    height: 25,
    position: 'absolute',
    top: 180,
    backgroundColor: '#F5F5F5',
  },
  shelf: {
    width: 1242,
    height: 25,
    borderRadius: 5,
    backgroundColor: 'white',
    position: 'absolute',
    top: 200,
    shadowColor: '#000',
    shadowOffset: {
      width: 3,
      height: 5,
    },
    shadowOpacity: 0.25,
    shadowRadius: 20,
    marginTop: 3,
  },
});