React-native阴影没有出现

Question

我试图在我的观点下面留下一个阴影，从我在网上发现它应该很简单：

    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>

在我的StyleSheet中：

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
}

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

Answer 2

对于iOS，提高外部zIndex的<View>

const styles = StyleSheet.create({  
 shadow: {  
  shadowOffset: { width: 10, height: 10 },  
  shadowColor: 'black',  
  shadowOpacity: 1,  
  elevation: 3,  
  zIndex:999,  
}  

Answer 3

我也希望在我的Android应用中看到一个阴影。所以我找到的诀窍是：

对于IOS：

const styles = StyleSheet.create({
    shadow: {
      shadowOffset: { width: 0, height: 2 },
      shadowColor: '#000',
      shadowOpacity: 0.2
    }
});

而对于Android：

const styles = StyleSheet.create({
    shadow: {
        elevation: 5
    }
});

如果您正在处理UI元素，我建议您查看NativeBase网站。就造型而言，它们使生活变得轻松。