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;
相关推荐
虾球xz15 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇20 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒24 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员40 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐42 分钟前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express