图像 borderRadius 在本机反应中不起作用

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，而不是 style：

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

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

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