代码之家 › 专栏 › 技术社区 › hossein derakhshan

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

react-native-flexbox flexbox react-native

8

hossein derakhshan · 技术社区 · 8 年前

这是我的组件:

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的宽度。如果不计算每个柔性梁的宽度,你知道吗?

2 回复 | 直到 8 年前

1

11

Chris Geirman 8 年前

坏消息是,如果你不知道容器的尺寸提前,那么我认为你唯一的选择是使用 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

很抱歉

2

0

Joykal Infotech 7 年前

我认为我们不能给予 border-radius 到 flex 所以我们可以使用 width 和 height 通过获取设备尺寸并给出 边界半径 到视图。

推荐文章

Ga3tan · 具有Flex维度的视图内部按钮的文本被截断

8 年前

pfust75 · React Native:Flex for ScrollView不起作用

8 年前

VPY · 反应本机:排列元素

8 年前

hossein derakhshan · 如何在react native with flex box中创建圆形

8 年前

The Monster · alignItems:“flex end”无法正常工作(它无法覆盖整个页面)-react native[重复]

8 年前