react-native - Image borderRadius 在 native react 中不起作用

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 中:

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