如何在React Native中创建自定义形状

2g32fytz 于 2023-01-18 发布在 React

关注(0)|答案(2)|浏览(163)

有谁能帮我在React Native中做出这样的形状吗？我在图片形状中用红色突出显示。
我试过了

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

react-native

来源：https://stackoverflow.com/questions/63357437/how-to-make-custom-shape-in-react-native

2条答案

按热度按时间

vwkv1x7d1#

我知道这不是react原生的，但是我认为你会在这里得到一个很远的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>

赞(0）回复(0）举报 2023-01-18

xyhw6mcr2#

我解决了这个问题。这是

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>

赞(0）回复(0）举报 2023-01-18

我来回答

如何在React Native中创建自定义形状

2条答案

相关问题

热门标签

最新问答