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

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

react-native-flexbox flexbox react-native

hossein derakhshan · 技术社区 · 7 年前

这是我的组件:

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 回复 | 直到 7 年前

Chris Geirman 7 年前

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

很抱歉

Joykal Infotech 5 年前

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

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前