android-需要使图像从下到下：React Native

我想使图像从底部开始四舍五入.这是我想做的：

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

这是我的代码：

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

它将给出如下输出：

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

解决方法:

您可以添加带有此形状的透明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
  }
}

这是结果

标签：android,ios,react-native,image,rounded-corners
来源： https://codeday.me/bug/20191012/1902870.html