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

问题描述

有人可以在React Native中帮助做出这种造型吗？我用红色突出显示了图片形状。

我以此方式尝试

const Header = memo(() => {
  return (
    <View
      style={{
        width: '100%',height: 120,borderRadius: 30,backgroundColor: 'orange',transform: [{ scaleX: 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>

,

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

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>