将 Native 阴影反应到顶部以提供类似“架子”的效果

Question

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

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

const CollectionScreen = () => {
    return (
        <View>
            <View style={{ backgroundColor: 'black', width: 100, height: 100, position: 'absolute', top: 100, left: 100}}/>
            <View style = {styles.shelf}/>
        </View>
    );
}

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

Answer 1

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

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,
  },
});