css - 按百分比在 React Native 中创建圆圈？

Question

我有一个宽度为 50% 的 View ，它的父 View 具有手机的整个宽度，但我想让它变成圆形，这是我的代码不起作用:

  clockContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width:Dimensions.get('window').width
  },
  clock: {
    width: '50%',
    borderRadius: '100%', // divide this by 2?
    backgroundColor: 'red'
  },

我环顾四周，它说你将它的宽度除以 2，但我不知道在这种情况下如何实现它。帮忙？

Answer 1

React Native 只允许在其 CSS 值中输入数字，而不是百分比。

您需要像计算父级 width 一样计算 borderRadius，然后简单地除以二:

borderRadius: Dimensions.get('window').width / 2

或者:

borderRadius: Dimensions.get('window').width * 0.5