需要使图像底部到角落：反应原生

问题描述：

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

这里是我的代码：

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

它会给这样的输出：

哪个属性，我需要设置，使上来看底部一个完美的圆？

半径被应用到角落不边缘 – Wainage

@Wainage没有得到你。 – Nirmalsinh

答

~~可以在其上添加一个PNG框架透明，这种形状~~

你也可以检查此，它可以帮助the-shapes-of-react-native

更新

这里是如何我通过代码进行管理

首先你创建这个结构

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 
    } 
}

，这里是结果

我已经通过您的链接。但没有任何想法如何去做。 – Nirmalsinh

如何使用此形状制作透明png并使其位于图像上方的绝对位置 –

我保留最后一个选项。如果我们得到完美答案，那么它将在未来帮助 – Nirmalsinh

答

您可以检查我的仓库，如果它可以帮助你

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

有一个抓我已挤压的图像的宽度，然后缩放它X轴

答

使用由@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');）使其对不同的屏幕尺寸更具动态性。

需要使图像底部到角落：反应原生

相关推荐