如何创建圆形形状与柔性框反应原生

时间:2017-10-25 16:43:25

标签: react-native flexbox react-native-flexbox

这是我的组成部分:

{{1}}
反应原生的bordeRadius没有像 50%这样的百分比工作,而在弹性框中我不知道每个flexItem的宽度。你有什么想法没有计算每个flexItem的宽度?

2 个答案:

答案 0 :(得分:6)

坏消息,如果您未提前知道容器的尺寸,那么我认为您唯一的选择是使用onLayout计算每个Flex容器&#39 ;尺寸。

{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

抱歉!

答案 1 :(得分:0)

我认为我们无法将border-radius赋予flex,因此我们可以通过获取设备尺寸来使用widthheight并将border-radius赋予设备视图。