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;
相关推荐
passer9815 分钟前
基于webpack的场景解决
前端·webpack
奶昔不会射手19 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy23 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy29 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵29 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531733 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
在逃牛马33 分钟前
【Uni-App+SSM+MP 宠物实战】Day4:Uni-App 项目初始化
前端
J_Asia34 分钟前
如何exclude不必要的so文件?
前端
一鹿有你们~36 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域