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,它适用于提升.

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

正如一些评论指出的那样，如果您需要overflow: 'hidden'. （例如具有圆形边缘和全出血图像的卡片。）

一个方便的方法是在没有backgroundColor设置的情况下向父容器添加阴影。这是由于这个问题https://github.com/facebook/react-native/issues/10049#issuecomment-366426897导致孩子继承没有背景的父视图的阴影。（当它影响多个孩子时，它看起来很奇怪。）

• 添加一个带有阴影且没有backgroundColor设置的父容器。
• 有单个子视图与一个backgroundColor。

    <View // Parent
      style={{
        flex: 1,
        // No backgroundColor
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 1},
        shadowOpacity: 0.8,
        shadowRadius: 2
      }}
    >
      <View // Card
        style={{
          flex: 1,
          borderRadius: 10,
          // To round image corners
          overflow: 'hidden',
          borderColor: '#999',
          borderWidth: 0.5,
          // https://github.com/facebook/react-native/issues/10049#issuecomment-366426897
          backgroundColor: '#FFF',
          // Android shadow
          elevation: 4
        }}
      >
        <Image // Content
          style={{
            height: '50%',
            width: '100%',
            alignSelf: 'center',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          source={{
            uri: 'https://yourimageurl.com/image.jpg'
          }}
          resizeMode="cover"
        />
      </View>
    </View>

Answer 4

我也想在我的 Android 应用程序中的视图下方有一个阴影。所以我发现的技巧是：

对于IOS：

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

对于安卓：

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

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

Answer 5

我通过添加我要应用阴影overflow: 'visible'的样式属性来解决这个问题。Image

image: {
    overflow: 'visible',
    width: 300,
    height: 200,
    borderRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    shadowColor: '#000',
    shadowOpacity: 0.2
  }