如何仅在反应原生的底部设置高程阴影？

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（预期）

右：安卓

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

原文由 tinmarfrutos 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不幸的是 RN 默认不支持，查看链接 https://ethercreative.github.io/react-native-shadow-generator/

但你可以像 这样 使用 npm 包

原文由 Maleking 发布，翻译遵循 CC BY-SA 4.0 许可协议