在iOS中反应本机渲染图像borderRadius

Question

使用react-native的图像组件在ios和android中的不同方面渲染图像。我正在尝试显示每个角都具有45度角截止的图像。

我尝试使用resizeMode道具的cover，contain和center填充视图内部的图像，以45度的比例进行裁剪，但裁剪宽度或高度。

中心不会裁切图像，但是如果图像的比例与视图的45度角不是相似，则Android不会做得很好。

<View style={(this.state.controlsDisplayed) ? styles.flexLR : styles.flexLRBlack}>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

  <View style={styles.imageWrapView}>

    <Image source={{uri: ‘file://’ + item.photoLeft}} key={“TDVIEW”} resizeMode={(Platform.OS == ‘ios’) ? ‘cover’ : ‘center’} style={styles.floatingImagePartView} />

  </View>

  <View style={{flex: (Platform.OS === ‘ios’) ? 0.85 : 0.5}} />

</View>

想要在角切成45度的ios上获取未裁剪的图像。与android图片相同。这是来自android设备的正确渲染的图像。

这是使用中心和封面在ios上渲染的图像

这是使用ios上的contains渲染的

如何像在Android设备上那样在ios设备上以45度截止截取渲染的图像？

Answer 1

尝试

<View
  style={{
    width: 250,
    height: 150,
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomLeftRadius: 50,
    borderBottomLeftRadius: 50,
    overflow: 'hidden'
  }}
>
  <Image
    source={{ uri: imageUri }}
    style={{
      width: 250,
      height: 150
    }}
  />
</View>

您可以使用以下道具在每个拐角处切成45度角。

borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomLeftRadius 

Answer 2

我发生了同样的问题。就我而言，borderRadius适用于android，但不适用于ios，因此我遵循了以下代码。...

这是我的可触摸按钮的样式项，您可以在其中使用图像...

<View  style = {styles.button}>
                    <TouchableOpacity >
                        <Text style={{textAlign:'center',color:'#ffff'}}>
                        Login
                        </Text>
                    </TouchableOpacity>
                </View>

和我的样式。...

 button: {
borderRadius:20,
marginTop:20,
alignSelf:'center',
textAlign:'center',
width:'70%',
height:'7%',
fontWeight:"bold",
color:'#ffff',
paddingTop:10,
backgroundColor: '#00AABF'

}

Answer 3

如果您将溢出设置为隐藏，则边框半径将再次开始工作

 borderRadiusFix:{
        borderRadius: 5,
        overflow: 'hidden',
    }