How can i add the curved bottom to a View in react-native? See curved example
I'f tried to a add an second view like this:
headerBottom: {
width: width / 2,
height: width / 2,
backgroundColor: 'red',
position: 'absolute',
bottom: -35,
left: width / 4 - 15,
borderRadius: width / 4,
transform: [
{scaleX: 2},
{scaleY: 0.25}
]
},
I've been able to get above but rather have a less bad solution right in the same view, not as in the example in a second view.
Best Answer-推荐答案 strong>
Here is the result. I used Dimensions (const window = Dimensions.get('window');) here to make it more dynamic to different screen sizes.
const styles = StyleSheet.create({
containerStyle: {
alignSelf: 'center',
width: window.width,
overflow: 'hidden',
height: window.width / 1.7
},
sliderContainerStyle: {
borderRadius: window.width,
width: window.width * 2,
height: window.width * 2,
marginLeft: -(window.width / 2),
position: 'absolute',
bottom: 0,
overflow: 'hidden'
},
slider: {
height: window.width / 1.7,
width: window.width,
position: 'absolute',
bottom: 0,
marginLeft: window.width / 2,
backgroundColor: '#9DD6EB'
}});
render() {
return(
<View style={styles.containerStyle} >
<View style={styles.sliderContainerStyle} >
<Slider/>
</View>
</View>
);
}
|