在本机反应中模糊边界

Question

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

我试着用影子来做：

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

但结果不一样

Answer 1

应用样式

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

工作示例 Link: 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;

在本机反应中模糊边界

Blur on border in react native

border

blur

react-native