需要使Image Bottom转角：React Native [英] Need to make Image Bottom to corner: React Native

问题描述

我想让图像从底部四舍五入。以下是我想要制作的内容：

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

这是我的代码：

 <查看
 style = {{
 backgroundColor：'transparent'，
 justifyContent：'center'，
 alignItems：'center'， 
身高：159，
宽度：'100％'，
 borderBottomWidth：70，
 borderBottomColor：'red'，
 borderBottomRightRadius：800，
 borderBottomLeftRadius ：800，
}} 
 /> 
  

它会输出如下：

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

解决方案

你可以在它上面添加一个透明的png框架

你也可以查看这可能有助于

I want to make image rounded from bottom of it. Here is what I wanted to make:

I have tried to set borderRadius, but it will apply for the whole image not for bottom.

Here is my code:

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

It will give output like this:

Which property do I need to set to make a perfect round on the bottom of view?

解决方案

you can add a png frame transparent with this shape on it

also you can check this it may help the-shapes-of-react-native

---

Update

here is how I managed do this by code

first you create this structure

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

and then apply this style

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

and here is the results

这篇关于需要使Image Bottom转角：React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！