没有出现 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>

在我的样式表中：

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

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

Answer 1

影子在 IOs 上工作吗？ 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，提高你外<View>

的zIndex

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和shadow的解决方案

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

Answer 5

正如一些评论所指出的，如果您需要 overflow: 'hidden'，您将陷入困境。（例如带有圆角边缘和 full-bleed 图像的卡片。）

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

添加一个 parent 带有阴影且未设置 backgroundColor 的容器。
有一个 child 视图和一个 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 增加到更高的值。并确保父容器上没有隐藏溢出，因为它覆盖了额外的部分。这是阴影渲染的最少代码。只要您的高程值正确，它就可以正常工作。

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

Answer 8

有时更改在react-native中不生效，您需要终止应用程序并重新打开它。而且你还必须保存你所做的每个文件的更改。

Answer 9

实际上对我来说，shodowOpacity 是我的风格所缺少的。我已经给了 shadowColor: 'rgba(0,0,0,0.4)'，它正在处理 Android，我不知道我还必须添加 shadowOpacity: 0.4 才能处理 iOS。添加它解决了问题

没有出现 React-native 阴影

React-native shadow not appearing

shadow

react-native