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网站。就样式而言，它们使生活变得轻松。

Answer 4

borderRadius和阴影的解决方案

        <View style={{backgroundColor: '#000', ...shadow}}>
          <View style={{overflow: "hidden", borderRadius: 10}}>
            <VideoPlayer
                ...
                />
          </View>
        </View>

Answer 5

正如一些评论所指出的那样，如果您需要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 6

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

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

Answer 7

Shadow 在 React Native 中工作。您所要做的就是将 Elevation 增加到更高的值。并确保父容器上没有隐藏溢出，因为它覆盖了额外的部分。这是阴影渲染的最低代码。只要您的 Elevation 值正确，它就可以正常工作。

shadowColor: 'black',
shadowOpacity: 1,
elevation: 12,

React-native阴影没有出现

7 个答案: