如何解决如何在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。