Since there is no "shadow" attribute in style list of Android,if we want to add a shadow effect on a component,we must patch a PNG-24 picture,but it's so non-graceful;therefore here comes a SVG shadow plugin to help with this problem. We suggest you to use native shadow on iOS
There are two BoxShadow Elements in the picture which support border-radius
,and the Line at the bottom is generated with BorderShadow
which provide with a top or bottom shadow(can also be inset shadow)
you must run the command to install the plugin and its dependences in you project
npm install react-native-shadow --save
you have to config your project to support the SVG component we use( react-native-svg
- Link):
Link native code
react-native link react-native-svg
react-native@0.29.0 and 0.29.1 cannot work with Android link properly:here
Or use rnpm instead
rnpm link react-native-svg
**The commands above may add some code to your android and ios dir,if those commands don't make sense,you can try the ways below(for Android): **
If you haven't add any other component,it's like:
rootProject.name = 'reactNative'
include ':app'
you can manually add the react-native-svg:
rootProject.name = 'reactNative'
include ':app', ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
if you have other components,don't try deleting theme
find the dependence part like
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
after add:
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-svg')
}
add package after the imports:
import com.horcrux.svg.SvgPackage;
AND add a method getPackages
in class MainApplication:
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SvgPackage()
);
}
After config the SVG component,you can simply use it in your project(show ES6 only):
import {BoxShadow} from 'react-native-shadow'
(For BorderShadow,import it as 'BoxShadow')- set an opption object:
const shadowOpt = {
width:100,
height:100,
color:"#000",
border:2,
radius:3,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:5}
}
3.create a shadow element and set the object to setting
,and you
MUST SET ITS PARENTELEMENT RELATIVE:
MUST SET ITS PARENTELEMENT RELATIVE:
render = () => {
return (
<View>
<Shadow setting={shadowOpt}>
<View style={{width:100,height:100}}/>
</Shadow>
</View>
)
}
Here is a simple use of the component:
import React, {Component} from 'react'
import {
StyleSheet,
View,
Text,
ScrollView,
Image,
TouchableHighlight
} from 'react-native'
import {BoxShadow} from 'react-native-shadow'
export default class VideoCell extends Component {
render = () => {
const shadowOpt = {
width:160,
height:170,
color:"#000",
border:2,
radius:3,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:5}
}
return (
<BoxShadow setting={shadowOpt}>
<TouchableHighlight style={{
position:"relative",
width: 160,
height: 170,
backgroundColor: "#fff",
borderRadius:3,
// marginVertical:5,
overflow:"hidden"}}>
…………………………
</TouchableHighlight>
</BoxShadow>
)
}
}
###BoxShadow
- 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
###BorderShadow
- width,color,border,opacity,style: these attributes are the same as above
- side: "top" or "bottom",you can choose where the shadow shows
- inset:
true
orfalse
,this is similar to CSS -shadow: color inset
This component is so simple,and we are making efforts to make it better; if you met any problem when using it,you can try solving yourself by reading the source code or post an issue,thanks ~~