如何在React Native中只在底部设置高程阴影？

Question

我想在视图底部添加阴影，但不知道如何在Android上实现。使用elevation属性会在顶部也产生阴影。有没有办法像在iOS上那样做呢？

这是我的代码：

export function makeElevation(elevation) {
const iosShadowElevation = {
    shadowOpacity: 0.0015 * elevation + 0.18,
    shadowRadius: 0.5 * elevation,
    shadowOffset: {
        height: 0.6 * elevation,
    },
};
const androidShadowElevation = {
    elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;

左侧: iOS （预期）

右侧: Android

编辑：我找到的唯一“假”解决方案是使用react-native-linear-gradient来创建自定义阴影。

- tinmarfrutos

Answer 1

您可以使用overflow: 'hidden'来实现所需的效果，而无需安装库。
将视图包装在父视图中，并将父级的溢出设置为隐藏，并仅在希望阴影出现的侧面应用填充，如下所示：

  <View style={{ overflow: 'hidden', paddingBottom: 5 }}>
    <View
      style={{
        backgroundColor: '#fff',
        width: 300,
        height: 60,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  0.4,
        shadowRadius: 3,
        elevation: 5,
      }} 
    />
  </View>

结果：

这里是一个自定义组件，你可以使用：

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) => (
  <View style={[ styles.container, style ]}>
    { children }
  </View>
);

const styles = StyleSheet.create({
  container:{
    overflow: 'hidden',
    paddingBottom: 5,
  }
});

SingleSidedShadowBox.propTypes = {
  children: PropTypes.element,
  style: ViewPropTypes.style,
};

export default SingleSidedShadowBox;

例子：

<SingleSidedShadowBox style={{width: '90%', height: 40}}>
  <View style={{
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 5,
  }} />
</SingleSidedShadowBox>

你可以根据你的阴影来调整填充

- Abdelrhman Elmahdy

---

我见过的最好的补丁解决了这个问题。 - Nicolas Silva

Answer 2

很遗憾，RN默认不支持该功能，请查看下面的链接 https://ethercreative.github.io/react-native-shadow-generator/

但是，您可以使用npm包，如这个

- Maleking

---

react-native-shadow 还不是完美的，但它似乎能够工作。谢谢 :-)如果 react-native 能够原生地处理它就太好了。 - tinmarfrutos

Answer 3

上面的回答都很有帮助，但对我来说最好的解决方法是将投下阴影的组件1- 和接收阴影的组件2-都包装在一个样式规则为overflow: "hidden"的组件中。

示例：

function SomeScreen (){
  return (
    <View style={{overflow: "hidden"}}/*Top shadow is hidden*/>
      <NavBar style={styles.shadow}/*The component dropping a shadow*/ /> 
      <ProductList /*The component under the shadow*/ />
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "black",
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 6,
    shadowOpacity: 0.2,
    elevation: 3,
  }
});

- Menas

---

这是最好的答案！被采纳的答案会产生一个不真实的阴影，因为 overflow: "hidden" 会在投射阴影的组件底部裁剪阴影。感谢您！ - brian sharon

Answer 4

只需将此代码添加/放置到主视图容器中：

const styles = StyleSheet.create({
      container: {
        ...Platform.select({
          ios: {
            shadowColor: '#000',
            shadowOffset: {width: 1, height: 3},
            shadowOpacity: 0.4,
          },
          android: {
            elevation: 4,
          },
        }),
      },
    });

- Ajmal Hasan

---

它将在顶部添加一个阴影。 - tinmarfrutos