反应原生中的边界模糊答案

【问题标题】：Blur on border in react native反应原生中的边界模糊
【发布时间】：2021-04-05 08:28:42
【问题描述】：

如何在 IOS 上的 ReactNative 中像这样在边界上进行模糊处理：

我试着用影子来做：

边界半径：7，填充垂直：10，填充水平：14， shadowColor: '黑色', 阴影偏移：{ 宽度：0，高度：0 }, 阴影半径：2，阴影不透明度：0.2，背景颜色：'白色'

但结果不一样

【问题讨论】：

标签： react-native border blur

【解决方案1】：

应用样式

dropShadow:{
      shadowColor: '#000',
      shadowOpacity: 0.5,
      shadowRadius: 5,
      elevation: 2,
    }

工作示例链接：https://snack.expo.io/@msbot01/referencefor

完整代码：

import React, { Component} from 'react';
import { View, Text, StyleSheet} from 'react-native';


class App extends Component {
    constructor(props) {
        super(props);
    } 


    render() {
        return(
            <View style={styles.container}>
              <View style={[{height:100, width:100, borderWidth:0, borderRadius:10},styles.dropShadow]}>

              </View>
                
               
            </View>
        )       
}}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent:'center', 
        alignItems:'center'
    },
    dropShadow:{
      shadowColor: '#000',
      shadowOpacity: 0.5,
      shadowRadius: 5,
      elevation: 2,
    }
});



export default App;

【讨论】：