如何使用flex box在react native中创建圆形

Question

这是我的组件：

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

react native中的bordeRadius不适用于50%这样的百分比，并且在flex box中，我不知道每个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

对不起！

Answer 2

我认为我们不能将border-radius赋予flex，所以我们可以通过获取设备维度来使用width和height，并将border-radius赋予视图。