如何使用 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 来计算每个弹性容器的尺寸。

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

如果您可以声明一个固定的宽度和高度，那么这很容易，但听起来这对您来说并不是什么新鲜事。

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

已针对此功能提交了 feature request。在这里投票表示支持...

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

对不起！

Answer 2

我认为我们不能将 border-radius 提供给 flex，因此我们可以通过获取设备尺寸并提供 border-radius 使用 width 和 height到视图。

如何使用 flex box 在 React Native 中创建圆形

how to create circle shape in react native with flex box

flexbox

react-native

react-native-flexbox