图像borderRadius无法在React Native中工作

Question

我在Image中使用borderRadius并将其循环。它适用于某些图像，但其他图像是矩形的。如果我触摸它，它将显示半径，并且在未触摸时会消失。使用隐藏的溢出也不能解决问题。

我很困惑，我使用了相同的样式，但是结果却不同。我仅在android设备上进行过测试。

https://snack.expo.io/@codebyte99/multiplearrays

代码：

<TouchableOpacity activeOpacity={0.8}>
    <ImageBackground
    source={{
      uri:
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ"

    }}
    style={[
      {
        width: 200, 
        height: 80,
        resizeMode: "center",
        justifyContent: "flex-end",
        alignItems: "center",
        margin: 5,
        marginRight: 0,
        marginTop: 0,
        marginBottom: 5,
        borderRadius: 6,
        overflow: "hidden",
      }
    ]}
    >
      <Text>
        {childItem.title}
      </Text>
    </ImageBackground>
</TouchableOpacity>

Answer 1

您必须将borderRadius设置为Image，而不是样式：

<Image source={{...}} borderRadius={6} .../>

您不会在图像样式中设置溢出：“隐藏”，而是在视图中设置

<View style={{ ..., overflow: 'hidden' }}>
   <Image ..../>
</View>