RN阴影组件使用

js 复制代码
yarn add react-native-shadow
yarn add react-native-svg   // 这个是必须的,阴影依赖这个包

四周都有阴影,如下设置

js 复制代码
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {BoxShadow} from 'react-native-shadow';

const App = () => {
  const shadowOpt = {
    width: 168, // 与子元素高一致
    height: 168, // 与子元素宽一致
    color: '#000', // 阴影颜色
    border: 7, // 阴影宽度
    radius: 10, // 与子元素圆角一致
    opacity: 0.45, // 透明
    x: 0, // 偏移量
    y: 0,
    style: {marginVertical: 5},
  };

  return (
    <View style={{marginLeft: 100}}>
      <BoxShadow setting={shadowOpt}>
        <View style={{width: 168, height: 168, backgroundColor: '#FFF'}}>
          <Text>111</Text>
        </View>
      </BoxShadow>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
  },
});

export default App;
相关推荐
灯火不休ᝰ几秒前
前端处理pdf文件流,展示pdf
前端·pdf
智践行3 分钟前
Trae开发实战之转盘小程序
前端·trae
最新资讯动态9 分钟前
DialogHub上线OpenHarmony开源社区,高效开发鸿蒙应用弹窗
前端
lvbb6618 分钟前
框架修改思路
前端·javascript·vue.js
树上有只程序猿20 分钟前
Java程序员需要掌握的技术
前端
从零开始学安卓23 分钟前
Kotlin(三) 协程
前端
阿镇吃橙子27 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼27 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化
逆袭的小黄鸭28 分钟前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试