React Native底卡图片圆角不能使用

Question

我有这些卡的图像。现在，我想的角落是圆的，但我目前没有找到一种方法来圆他们不工作。

<TouchableOpacity onPress={() => navigation.navigate('OffersScreen', {offers: offersArray } ) }>
    <Card  style={{height: 190, width: 190, margin: 0, padding: 0, justifyContent:'center', alignItems: 'center' }}>
      <CardItem cardBody>
          <ImageBackground source={path} style={{ width: 190, height: 190, flex: 1, resizeMode: 'contain'}}/>
          <Text style={styles.textContent}>{ category['category_name'] }</Text>
        </CardItem>
    </Card>
  </TouchableOpacity>);

Answer 1

你需要使用borderRadius属性来制作圆角。

在某些情况下，溢出隐藏也会有帮助。

Answer 2

在这种情况下，你需要做的是在页面上增加一个 borderRadius 对你的 <Card /> 组件.The borderRadius 取一个整数。整数越大，你的角就越圆。试试这个。

 <TouchableOpacity onPress={() => navigation.navigate('OffersScreen', {offers: offersArray } ) }>
    <Card  style={{height: 190, width: 190, margin: 0, padding: 0, justifyContent:'center', alignItems: 'center',  borderRadius: 45 }}>
      <CardItem cardBody>
          <ImageBackground source={path} style={{ width: 190, height: 190, flex: 1, resizeMode: 'contain'}}/>
          <Text style={styles.textContent}>{ category['category_name'] }</Text>
        </CardItem>
    </Card>
  </TouchableOpacity>);