如何在 React Native 中制作自定义形状答案

【问题标题】：How To Make Custom Shape In React Native如何在 React Native 中制作自定义形状
【发布时间】：2020-12-01 01:48:57
【问题描述】：

任何人都可以帮助在 React Native 中制作这种形状吗？我在图片形状中用红色突出显示。

我是这样尝试的

const Header = memo(() => {
  return (
    <View
      style={{
        width: '100%',
        height: 120,
        borderRadius: 30,
        backgroundColor: 'orange',
        transform: [{ scaleX: 1 }]
      }}
    />
  )
})

【问题讨论】：

标签： javascript android react-native user-interface

【解决方案1】：

我知道这不是本机反应。但是，我确实认为您将在这里使用 CSS：

body {
  overflow-x: hidden;
}

.header {
  position: relative;
  top: -75px;
  left: -10%;
  height: 250px;
  width: 120%;
  background-color: #555;
  border-radius: 50%;
  background-image: linear-gradient(to top right, red, yellow)
}

<div class="header">
<div>

【讨论】：

没问题，如果你想在底部使用其他形状我们通常使用带有alpha层的图像
知道了，我正在制作我的个人项目。所以我正在尝试。结帐，我找到了解决问题的方法

【解决方案2】：

我解决了这个问题。这是解决方案

import { Dimensions } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
const { width: W } = Dimensions.get('window')

   <LinearGradient
    start={{ x: 0.8, y: 0.2 }}
    end={{ x: 0.5, y: 1.0 }}
    locations={[0.1, 0.9]}
    colors={[colors.HEADER_GRADIENT_1, colors.HEADER_GRADIENT_2]}
    style={{
      height: 245,
      width: W - 120,
      left: 50,
      backgroundColor: 'red',
      top: -85,
      borderRadius: 150,
      transform: [{ scaleX: 3 }]
    }}
  >
    <StatusBar translucent={true} backgroundColor={'transparent'} />
  </LinearGradient>

【讨论】：