React Native Base Card Image: закругленные углы не работают - PullRequest
Новая
       58

React Native Base Card Image: закругленные углы не работают

0 голосов
/ 07 мая 2020

У меня есть эти карточки с изображением. Теперь я бы хотел, чтобы углы были закруглены, однако в настоящее время я не нахожу способ их округлить, не работает 

<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>);

Ответы [ 2 ]

2 голосов
/ 07 мая 2020

В этом случае вам нужно добавить 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>);
1 голос
/ 07 мая 2020

Вам необходимо использовать свойство borderRadius для закругления углов.

В некоторых случаях может помочь скрытое переполнение.

...