React Native 阴影效果双平台实现

React Native 阴影效果双平台实现, 安卓端引用'react-native-shadow'第三方依赖实现，ios端使用api提供的属性即可。

（更好的方式可以用阴影底图让UI提供，据了解通过style设置阴影属性较消耗渲染性能）

部分实现代码：（效果按自己需求调整）

import {BoxShadow} from 'react-native-shadow';

Shadow = props => {
  const {width, height} = props;
  return IS_ANDROID ? (
    <BoxShadow
      setting={{
        width: width,
        height: height + 6,
        color: '#000',
        border: 2,
        radius: 3,
        opacity: 0.02,
        x: 3,
        y: 0,
        style: {marginVertical: 0, justifyContent: 'center'},
      }}>
      {props.children}
    </BoxShadow>
  ) : (
    <View
      style={{
        backgroundColor: 'white',
        shadowColor: '#000000',
        shadowOffset: {h: 10, w: 10},
        shadowRadius: 5,
        shadowOpacity: 0.1,
      }}>
      {props.children}
    </View>
  );
};

使用方式：

<Shadow width={200} height={100}>
  <View
    style={{
      width: 200,
      height: 100,
      backgroundColor: '#FFF',
    }}>
    {/**自定义布局内容*/}
  </View>
</Shadow>

转载请注明出处 https://blog.csdn.net/u010379595/article/details/81561247