React Native加阴影shadow,主要用到了组件react-native-shadow。
- 安装步骤1:yarn add react-native-shadow
- 安装步骤2:yarn add react-native-svg@5.5.1
- 安装步骤3:react-native link react-native-svg
很多时候run工程可能会报错:no component found for view with name RNSVGLinearGradient，则需要执行步骤3之后，react-native run-ios。
attributes
width: you must set the value the same as your child component
height: the same as above
color: the color of shadow,it doesn't support rgba now,you may use opacity
border: the width of shadow , cannot less than 0
radius: the same value as the "borderRadius" of chileElement
opacity: the opacity of shadow
x: the offsetX of shadow
y: the offsetY of shadow
style: the style you want to add to the wrapper box
宽度和高度要和组件的宽度和高度一致。阴影颜色，阴影宽度，半径，透明度，x,y轴方向的偏移量，样式。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import {BoxShadow} from 'react-native-shadow'
export default class App extends Component{
render() {
const shadowOpt = {
width:100,
height:100,
color:"#000",
border:10,
radius:50,
opacity:0.2,
x:0,
y:8,
style:{marginVertical:5}
}
return (
<View style={styles.container}>
<BoxShadow setting={shadowOpt}>
<View style={{width:100,height:100,backgroundColor:'green',borderRadius:50}}>
</View>
</BoxShadow>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
WX20181205-014928.png
