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

贾苏尔·库尔巴诺夫

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

我试过这种方式

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

在此处输入图片说明

贾苏尔·库尔巴诺夫

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

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React Native Android中添加自定义字体

如何自定义React Native按钮

如何在Android上的React Native中测量自定义本机组件

react-Native上的自定义形状按钮

如何在React Native Webview中自定义网站CSS?

如何在React-Native的自定义NavigationOptions中传递this.state值

如何在React Native Navigation v2中更新自定义顶部栏标题组件?

如何在React Native中从自定义导航器导航到createBottomTabNavigator?

React-Native中边框半径图像的自定义形状

如何在React Native中使用自定义警报?

如何在React-native中制作线性渐变背景

如何在React Native中为密码输入自定义文本?

如何在React Native中安装React Native Maps?

如何在react native的透明视图上创建自定义UI?

如何在react-native中加载自定义的tensorflowJS模型?

如何在React Native中使用Sentry自定义index.js的位置?

如何在React Native中创建自定义的顶部导航栏

如何在Flutter中制作自定义按钮形状

如何在React Native的自定义视图上将道具传递给StyleSheet?

如何在React Native中将屏幕添加到自定义底部导航

如何在自己的文件中的React Native中正确实现自定义组件?

如何在React Native中向标题添加自定义标题和按钮?

如何在 React Native 中自定义材质底部选项卡导航器?

如何自定义 React-Native 验证码

如何在 React Native 中制作透明状态栏

如何在 react-native 中制作弹跳按钮动画

如何在 react konva 中创建这个自定义形状

如何在 React Native 中为自定义组件的 2 种不同导入设置不同的文本颜色

如何在 Flutter 中制作自定义形状容器?