我有一个框阴影的引用，我想实现到我的应用程序。
这是我目前所做的：

import {View, Text, Button, StyleSheet, TouchableOpacity, Dimensions} from 'react-native'

const halfWindowsWidth = Dimensions.get('window').width 

export default function DesignTests (){
    return (
        <View style={styles.container} >
            <View style={styles.first_half_container_parent}>
                <View style={styles.first_half_container}></View>
            </View>
            <View style={styles.additionalBar_parent_parent}>
                <View style={styles.additionalBar_parent}>
                    <View style={styles.additionalBar}></View>
                </View>
            </View>
            <View style={styles.second_half_container}></View>
        </View>
    )
} 

const styles = StyleSheet.create({
    container: {
        width: "100%",
        height: "100%",
        backgroundColor: "#433838",
        zIndex: 0,
    },

    first_half_container_parent: {
        height:"50%",
        width: halfWindowsWidth,
        backgroundColor: '#c07c55',
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        zIndex: 3,
        elevation: 15,
        shadowColor: 'black',
    },
    first_half_container: {
        height: "100%",
        width: halfWindowsWidth,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,    
        bottom: 3,
        backgroundColor: '#e2c9ac',
        zIndex: 6,   
    },


    additionalBar_parent_parent: {
        backgroundColor: "#c07c55",
        height: "2%",
        zIndex: 4,
        width: halfWindowsWidth *0.2,
        top: -3, 
        left: "40%",
        borderBottomLeftRadius: 90,
        borderBottomRightRadius: 90,
        zIndex: 4,
        overflow: 'hidden',
    },
    additionalBar_parent: {
        backgroundColor: "#c07c55",
        height: "100%",
        zIndex: 4,
        width: halfWindowsWidth *0.2,
        top: -1, 
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        zIndex: 4,
        elevation: 15,
        overflow: 'hidden',
        shadowColor: 'black',
    },
    additionalBar: {
        backgroundColor: "#e2c9ac",
        height: "150%",
        zIndex: 5,
        width: halfWindowsWidth *0.195,
        top: -10, 
        left: 1,
        borderBottomLeftRadius: 15,
        borderBottomRightRadius: 15,
    },


    second_half_container: {
        height:"50%",
        backgroundColor: '#433838',
        zIndex: 1,
    },
  });

我需要阴影更清晰。就像这个参考

• 我发现并尝试了很少的东西，但没有一个能很好地适应阴影的强度。
• 我认为线性渐变可能是一个解决方案，但这在移动的上看起来真的很糟糕，颜色过渡一点也不平滑。
• 我甚至试着在第一个框下面加一个暗条，然后加一个黑色阴影，这样暗条的末端就会模糊，给予人一种阴影的效果，但是看起来并不自然。不管我怎么摆弄色调，暗条的边缘都是可见的。
• 对于那些可能建议使用React Native Shadow Generator的人，我已经试过了，它真的没有帮助

使用react native（expo-Android）获得黑色锐利阴影需要什么

编辑：我刚刚发现了一个名为Skia的库，它适用于所有设备，并且与Expo配合得很好，所以我打算使用它