React Native-图像半圆（使用CSS）

我有一个圆形图像，我需要使用React Native在半圆中显示，就像附件中显示的一样。请帮助使用CSS

---

您可以使用borderBottomLeftRadius和borderTopLeftRadius的样式创建半圆。您可以创建图像半圆，如下所示：-

<Image 
    source={{"uri": 'https://www.w3schools.com/html/pulpitrock.jpg'}}
    style={{
        margin: 30, 
        height: 100, // change these values according to your requirement.
        width: 50, 
        borderTopLeftRadius: 50, 
        borderBottomLeftRadius: 50
    }}
/>

您可以根据需要和要求更改这些值。

您可以将CSS道具与

样本

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <View style={styles.imageWrapper}>
            <Image source={{uri: 'https://dummyimage.com/500x500/000/fff.png'}} style={styles.image} />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imageContainer: {
    alignItems: 'center',
    backgroundColor: 'yellow'
  },
  imageWrapper: {
    width: 125, // half of the image width
    height: 250,
    backgroundColor: 'transparent',
    overflow: 'hidden'
  },
  image: {
    width: 250,
    height: 250,
    borderRadius: 125, // half of the image width
    backgroundColor: 'transparent'
  }
});

导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
图像容器：{
对齐项目：“居中”，
背景颜色：“黄色”
},
图像包装器：{
宽度：125，//图像宽度的一半
身高：250，
背景色：“透明”，
溢出：“隐藏”
},
图片：{
宽度：250，
身高：250，
边界半径：125，//图像宽度的一半
背景颜色：“透明”
}
});

以下是我为图像左右位置找到的解决方案：

renderLeftRightImage (item, index) {
    var imagePath = item.image?(Strings.BASE_IMAGE_URL+item.image[0].image):'https://placeimg.com/640/480/people';        

    if(item.position == 'left'){
        return(
            <View style={{overflow: 'hidden', width : 105, height:210, position : 'absolute', left:80,  bottom:62, borderTopLeftRadius:150, borderBottomLeftRadius:150, backgroundColor:'transparent'}}>
                <Image style={{width : 210, height:210}} source={{uri:imagePath}}/>
            </View>
        )
    }
    else if(item.position == 'right'){
        return(
            <View style={{overflow: 'hidden', width : 105, height:210, position : 'absolute', right:80,  bottom:62, borderTopRightRadius:150, borderBottomRightRadius:150, backgroundColor:'transparent'}}>
                <Image style={{width : 210, height:210, position:'absolute', right:0}} source={{uri:imagePath}}/>
            </View>
        )
    }
    else{
        return null;
    }
}

renderLeftRightImage（项目，索引）{
var imagePath=item.image？（Strings.BASE\u image\u URL+item.image[0]。image）：'https://placeimg.com/640/480/people';        
如果（item.position==“left”）{
返回(
)
}
否则如果（item.position=='right'）{
返回(
)
}
否则{
返回null；
}
}

谢谢@bennygenel，但我已经做了一些尝试和错误，并且做到了这一点：

@Amit'overflow'属性有帮助。谢谢