Як використовувати радіус межі лише для 1 кута (рідний для реакції)?

Як використовувати радіус межі в React Native лише для 1 кута?

У мене є модальне вікно

Як бачите, кути низу не закруглені, це трапляється, коли я використовував backgroundColor для кнопок. Я намагався встановити переповнення прихованим до модальної обгортки, і це мені не допомогло. Тепер я хочу використовувати радіус межі до кнопок (лише для 1 кута).

Мій код http://jsbin.com/sexeputuqe/edit?html,css

javascript reactjs react-native

— Максим
джерело

Я не знаю про responsejs, але ви можете використовувати border-top/bottom-left/right-radiusвластивість CSS (наприклад, border-bottom-right-radius: 5px)

— Yoplaboom

Велика проблема з користувацьким інтерфейсом: "Натискання" Скасувати "призведе до XYZ", але кнопки скасування немає. Крім того, "Так", здається, відповідає руйнівній дії. Я настійно рекомендую змінити мітки кнопок на "Відкинути" (що також має бути зліва) і "Зберегти".

— Niet the Dark Absol

Чи можете ви поділитися своїм кодом та стилем для елемента? Думаю, я можу знати, що тут відбувається. Дякую.

— Nader Dabit

Мій код jsbin.com/sexeputuqe/edit?html,css

— Максим

Вибачте, але для досягнення бажаного ефекту ви можете скористатися overflow: 'hidden'в батьківському поданні кнопок

— Vincent Joy

Відповіді:

264

Ви вже пробували з наступним?
- borderBottomLeftRadius: число
- borderBottomRightRadius: число
- borderTopLeftRadius: число
- borderTopRightRadius: число

Крім того, ви можете знайти більше інформації в документах компонента подання .

— Маттео Маццароло
джерело

Так, я намагався, але ніякого ефекту не мав.

— Максим

У вашому прикладі, якщо дві кнопки знаходяться у вікні запитань, вам потрібно встановити радіус межі кнопки та контейнера. Якщо ні, тоді використовуйте borderBottomLeftRadius та borderBottomRightRadius, щоб зробити це фокусом. Щось на кшталт borderBottomLeftRadius: 5кнопки «Ні» та borderBottomRightRadius: 5«Так». Якщо це не спрацює, можливо, надайте нам зразок вашого коду, щоб ми могли перевірити, чи ніщо інше не заважає.

— Г. Хамаїде

не працює у мене на IOS. тільки borderRadiusбуде працювати , але застосовувати радіус по всіх кутках

— Kevin Amiranoff

@kevin Версія Imageкомпонента для iOS ігнорує налаштування радіуса для певного кута . Ви можете використовувати від’ємне поле, щоб у деяких випадках «замаскувати» кути, які ви не хочете закругляти.

— Джош

спробуйте розмістити overflow:hiddenу своєму поданні (або тексті). Це має спрацювати.

— Харкірат Салуджа

Додайте у свій стиль такі властивості:

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number

Це спрацювало для мене.

Дякую

— Син Адгітя
джерело

Додайте більше пояснень до відповіді.

— Vivek Kumar

@ DanielJosePadillaPeña, ти знайшов якесь рішення?

— Manspof

жорстке кодування, додавши ще одне зображення без кута, приховуючи радіус. Це не хороший спосіб, але все ж знайшов інше рішення.

— Даніель Хосе Паділла Пенья

Це працює для мене, коли я додав переповнення: "приховане" майно

— Пьотр Бадура,

Припустимо, для верхнього лівого та нижнього лівого кутів тегу Image встановлено лише радіус.

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

добре виглядає для ios.

— Ширлі Чен
джерело

неповна - чи можете ви, будь ласка, додати необхідні пакунки npm та відсутні importоператори?

— ssc