需要使图像底部到angular落：反应本机

我想让图像从底部变圆。 这是我想要做的：

我试图设置borderRadius ，但它将适用于整个图像而不是底部。

这是我的代码：

<View style={{ backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'center', height: 159, width: '100%', borderBottomWidth: 70, borderBottomColor: 'red', borderBottomRightRadius: 800, borderBottomLeftRadius: 800, }} /> 

它会给出这样的输出：

我需要设置哪个属性才能在视图底部做出完美的回合？

Answer 1

你可以在这个形状上添加一个透明的PNG帧

你也可以检查一下，这可能有助于形状的反应原生

---

更新

这里是我如何pipe理通过代码做到这一点

首先你创build这个结构

 render() { return( <View style={styles.container} > <View style={styles.background} > <Image style={styles.image} source={require('./image.jpeg')} /> </View> </View> ); } 

然后应用这种风格

 const styles = { container: { alignSelf: 'center', marginTop: 100, width: 200, overflow: 'hidden', // for hide the not important parts from circle margin: 10, height: 100, }, background: { // this shape is a circle borderRadius: 400, // border borderRadius same as width and height width: 400, height: 400, marginLeft: -100, // reposition the circle inside parent view position: 'absolute', bottom: 0, // show the bottom part of circle overflow: 'hidden', // hide not important part of image }, image: { height: 100, // same width and height for the container width: 200, position: 'absolute', // position it in circle bottom: 0, // position it in circle marginLeft: 100, // center it in main view same value as marginLeft for circle but positive } } 

这里是结果

Answer 2

你可以检查我的存储库，如果它可以帮助你

https://github.com/paraswatts/React_Native_Custom_shape_image_view/tree/master

有一个我已经挤压图像的宽度，然后在X轴上缩放的一个捕获

Answer 3

使用@Mohamed Khalil提到的方法，

 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' }}); 

结果如下。 我在这里使用Dimensions （ const window = Dimensions.get('window'); ）使其对不同的屏幕尺寸更具dynamic性。