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

Answer 1

您可以使用<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>

示例：

@IBOutlet var currentBenefitsStackView: UIStackView!

func populateMemberBenefits(_ data: ResponseData) {
        let nib = UINib(nibName: "StackView", bundle: Bundle.SampleAccount)
        if let memberBenefitsView = nib.instantiate(withOwner: nil, options: nil).first as? StackView {
             guard let memberBenefitsPerks = data.benifts else {return} //data.benifts contains the key value pairs
            for benefits in memberBenefitsPerks {
                memberBenefitsView.labelText?.text = benefits.value
                let imageURL = URL(string: "\(SampleURL)")
                let image = try? Data(contentsOf: imageURL!)
                memberBenefitsView.imageView.image = UIImage(data: image!)
                currentBenefitsStackView.addArrangedSubview(memberBenefitsView)
            }

您可以根据自己的阴影调整填充

Answer 2

不幸的是，RN默认情况下不支持它，请单击打击链接 https://ethercreative.github.io/react-native-shadow-generator/

但是您可以使用this

之类的npm软件包。

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,
  }
});

Answer 4

在IOS中，我使用以下代码：

shadowRadius: 3,
shadowColor: "black",
shadowOpacity: 0.7,
shadowOffset: { width: 0, height: -5 },

我认为elevation仅适用于android，在shadowOffset中，您可以处理阴影的方向，如果将宽度和高度设置为0，则阴影将包裹所有分量。

我如何在React Native上仅在底部设置高程阴影

4 个答案: