React Native Base Card 图像圆角不起作用

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 /> 组件。 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>);

React Native Base Card 图像圆角不起作用

React Native Base Card Image rounded corners not working

reactjs

react-native

native-base