Question

我想将圆形视图分为2种不同颜色的视图，这将导致圆形视图包含两种背景颜色。假设我们在圆形主视图中填充了两个视图：蓝色和红色。为蓝色和红色视图提供属性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>

    );
  }
}

enter image description here

Answer 1

检查下面的代码。

“ border [Top | Bottom] [Left | Right] Radius”样式属性使您可以绘制半个圆。只需将它们放在彼此之下的列中。在绘制两个视图时，必须以“绝对”位置将文本绘制在顶部。

参数化此代码可能更干净；将其提取为功能组件并为尺寸，颜色，...创建参数。

render() {
return (
<View style={{flexDirection: 'column', marginTop: 60, width: 300, height: 300}}>
    { /* Top circle half */ }
    <View
            style={{
              height: '50%',
              width: '100%',
              backgroundColor: "pink",
              borderTopLeftRadius: 150,
              borderTopRightRadius: 150
            }}
          >
    { /* Bottom circle half */ }
    </View>
          <View
            style={{
              height: '50%',
              width: '100%',
              backgroundColor: "blue",
              borderBottomLeftRadius: 150,
              borderBottomRightRadius: 150
            }}
          >
    </View>
    { /* Text container */ }
    <View style={{position: 'absolute', left: 0, right: 0, justifyContent: 'center', alignItems: 'center', top: 0, bottom: 0}}>
      <Text> ❤️ </Text>
    </View>
  </View>
);

}

Answer 2

您可以使用flex：1添加2个视图，并使用不同的背景色。只需在主视图中添加溢出：“隐藏”

完整代码

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>
    );
  }
}

如何使用borderRadius将两个View组件放入一个View组件中？

2 个答案: