在 React Native 中按百分比创建 circle

Question

我有一个宽度为 50% 的视图，它的父级具有手机的整个宽度，我想让它变圆，这是我的代码不起作用：

  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，然后简单地除以 2：

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

或：

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