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组件中添加一个<Card />。 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>);

Answer 2

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

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

反应本机基本卡图像圆角不起作用

2 个答案: