如何创建圆形形状与柔性框反应原生

Question

这是我的组成部分:

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

bordeRadius in react native不能像50%这样的百分比工作,而在flex框中我不知道每个flexItem的宽度.你有什么想法没有计算每个flexItem的宽度？

Answer 1

坏消息,如果您不提前知道容器的尺寸,那么我认为您只能选择onLayout计算每个Flex容器的尺寸.

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

如果你可以声明一个固定的宽度和高度,那么它很容易,但听起来这对你来说不是新闻.

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

已经提交了有关此功能的功能请求.通过在此投票来表达您的支持......

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

抱歉!