You can use overflow: 'hidden'
to achieve the desired result without having to install a library.
wrap the view in a parent view and set the parent's overflow to hidden and apply a padding only on the side where you want your shadow to appear like so:
<View style={{ overflow: 'hidden', paddingBottom: 5 }}>
<View
style={{
backgroundColor: '#fff',
width: 300,
height: 60,
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}}
/>
</View>
结果:
here's a custom component that you can use:
import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'
const SingleSidedShadowBox = ({ children, style }) => (
<View style={[ styles.container, style ]}>
{ children }
</View>
);
const styles = StyleSheet.create({
container:{
overflow: 'hidden',
paddingBottom: 5,
}
});
SingleSidedShadowBox.propTypes = {
children: PropTypes.element,
style: ViewPropTypes.style,
};
export default SingleSidedShadowBox;
example:
<SingleSidedShadowBox style={{width: '90%', height: 40}}>
<View style={{
backgroundColor: '#fff',
width: '100%',
height: '100%',
shadowColor: '#000',
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
}} />
</SingleSidedShadowBox>
你可以根据你的阴影来调整填充