React Native加阴影shadow

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