React Native：如何將圓形視圖的背景顏色拆分為兩種不同的顏色？

Question

我在 RN 中有幾個圓形的Animated.View ，它們具有不同的backgroundColor 。 我想，理想情況下通過樣式，將backgroundColor拆分為一半和一半，2 種動態顏色，如下所示：

我試過將一個單獨的View作為我父母Animated.View的孩子作為顏色的另一半，但這不起作用/保持圓形樣式。 編碼：

<TouchableWithoutFeedback
  style={globalStyles.button}
  disabled={isDisabled || isPending || !isOpen}
  hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}
  onPressIn={onPressIn}
  onPressOut={onPressOut}
  onPress={onPress}
>
  <Animated.View
    style={[
      globalStyles.buttonInner,
      applyButtonWidth(innerWidth),
      { backgroundColor },
    ]}
  >
    {content}
  </Animated.View>
</TouchableWithoutFeedback>

我找不到任何關於此的信息。 如何在此處拆分backgroundColor ？

Answer 1

湯姆的答案只是一些改進。 在下面的代碼中，我使用樣式化組件只是為了幫助組織代碼和輕松重用組件。

import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components';

const size = 200;
const half = size / 2;

const Circle = styled.View`
  border-radius: ${size};
  height: ${size};
  width: ${size};
  display: flex;
  overflow: hidden;
  flex-direction: row;
`;

const InnerCircle = styled.View`
  background-color: ${(props) => props.color || '#fbc2ea'};
  height: ${size};
  width: ${half};
`;

export default function App({ color }) {
  return (
    <Circle>
      <InnerCircle color="#fbcbda" />
      <InnerCircle color="#c02b3e" />
    </Circle>
  );
}

這是幫助您測試的小吃。

和截圖：