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;
相关推荐
前端太佬2 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200413 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼13 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092717 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸19 分钟前
一文带你使用Vue完成移动端(apk)项目
前端
会飞的鱼先生31 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了31 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风37 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风37 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺1 小时前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试