阴影react-native-shadow

阴影

1. 第一步：在react-native工程目录下通过yarn安装react-native-shadow

yarn add react-native-shadow

2. 第二步：在react-native工程目录下通过yarn安装react-native-svg

yarn add react-native-svg 

3. 第三步：链接 react-native-svg(安卓的链接后路径如果有问题就在settings.gradle修改下,应该也是反斜杠改为正斜杠的问题)

react-native link react-native-svg

代码示例

//导入模块
import {BoxShadow} from 'react-native-shadow';

//布局
export default class Fenceing extends Component {

    render() {
        return (
            <View style={styles.container}>
                <BoxShadow setting={shadowOpt} >
                    <View style={styles.cell}>
                        <Text>需要在外部边缘添加阴影的布局</Text> 
                    </View>   
                </BoxShadow>
            </View>
        );
    }
}

//样式
const shadowOpt = {
    width:Dimensions.get('window').width-16,
    height:170,
    color:'#000',
    border:10,
    radius:4,
    opacity:0.1,
    x:0,
    y:1,
    style:{marginVertical:5}
};

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 8,
        paddingLeft: 8,
        paddingRight: 8,
        backgroundColor:'#F7F8FA',
    },
    cell :{
        backgroundColor:'#FFFFFF',
        borderRadius: 4,
        height:170,
    }
});