css - 如何在带有 borderRadius 的 View 组件中放置两个 View 组件？

Question

我想用 2 个不同颜色的 View 将圆形 View 分成两半，这将导致包含两种背景颜色的圆形 View 。假设我们用两个 View 填充主圆形 View :蓝色和红色 View 。为蓝色和红色 View 提供 flex:1 属性，意味着它们将占用相同数量的空间。问题是它们不符合主视图的样式属性。 (borderRadius 有问题)

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View
              style={{
                height: 300,
                width: 300,
                backgroundColor: "pink",
                borderRadius: 300,
                justifyContent: "center",
                marginTop:60
              }}
            >
              <Text style={{ textAlign: "center", fontSize: 150 }}>❤️</Text>
      </View>

    );
  }
}

Answer 1

您可以使用 flex:1 添加 2 个 View 并具有不同的背景颜色。只需将 overflow: "hidden"添加到主视图

完整代码

import React, { Component } from "react";
import { View, Text } from "react-native";

export default class Dashboard extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "column",
          marginVertical: 60,
          marginHorizontal: 30,
          width: 300,
          height: 300,
          borderRadius: 150,
          overflow: "hidden"
        }}
      >
        <View style={{ flex: 1, backgroundColor: "#ffbecb" }} />
        <View style={{ flex: 1, backgroundColor: "blue" }} />
        <View
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            justifyContent: "center",
            alignItems: "center",
            top: 0,
            bottom: 0
          }}
        >
          <Text style={{ fontSize: 80 }}> ❤️ </Text>
        </View>
      </View>
    );
  }
}