React-native 阴影未出现

Question

我正在尝试在我的 View 下方添加阴影，从我在网上找到的内容来看，这应该非常简单:

shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1.0,

但问题是阴影根本没有出现。

这是我的组件

<View style={styles.shadow}>
    <View style={styles.box} >
        <View style={styles.ListComponent}>
            <Text style={styles.itemText}>Livestream</Text>
        </View>
    </View>
</View>

在我的样式表中:

const styles = StyleSheet.create({
    shadow: {
    shadowOffset: { width: 10, height: 10 },
    shadowColor: 'black',
    shadowOpacity: 1.0
},

这有什么原因或者我错过了什么吗？

Answer 1

影子在 IO 上工作吗？Android 和 IOS 在 React-Native 中工作 ≠。对于 Android，它适用于 elevation .

const styles = StyleSheet.create({
shadow: {
  shadowOffset: { width: 10, height: 10 },
  shadowColor: 'black',
  shadowOpacity: 1,
  elevation: 3,
  // background color must be set
  backgroundColor : "#0000" // invisible color
}

否则，请尝试为阴影组件设置背景颜色:)