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 框中我不知道每个 flexItem 的宽度。如果不计算每个 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视图。