Как создать форму круга в реагировать родной с Flex Box

Question

Это мой компонент:

const styles = {
 menuContainer: {
  flex: 1,
  flexDirection: 'column'  
 },
 menuItem: {
  flex: 1,
  borderRadius: ??
 }
}
        <View style={styles.menuContainer}>
            <TouchableOpacity {styles.menuItem}/>                    
            <TouchableOpacity {styles.menuItem}/> 
        </View>

bordeRadius в ответном нативе не работает с процентом, например, 50%, а во флекс-боксе я не знаю ширину каждого флекситема. У вас есть идея без расчета ширины каждого flexItem?

Answer 1

Плохая новость: если вы не знаете размеры контейнера заранее, то я думаю, что вы можете использовать только onLayout рассчитать размеры каждого гибкого контейнера.

{nativeEvent: { layout: {x, y, width, height}}}

Если вы можете объявить фиксированную ширину и высоту, то это легко, но, похоже, это не будет для вас новостью.

circle: {
    width: 100,
    height: 100,
    borderRadius: 100/2
}

На эту функцию уже отправлен запрос. Покажите свою поддержку, проголосовав здесь...

https://react-native.canny.io/feature-requests/p/borderradius-percentages

Сожалею!

Answer 2

Я думаю что мы не можем дать border-radius к flex так что мы можем использовать width а также height получив размеры устройства и указав border-radius к виду.