我如何在 React Native 中实现以下设计? [英] How can i achieve below design in react native?

问题描述

为了在我的一个应用中实现以下设计，我有点卡在这里.

I'm little bit stuck here to achieve below design in one of my app.

我的代码在这里，

<View style={{flex: 1, backgroundColor: '#fff', alignItems: 'center'}}>
        <View style={{backgroundColor: 'rgb(25,195,192)', width: '100%', height: '40%', borderBottomLeftRadius: 100, borderBottomRightRadius: 100}}>
        </View>
</View>

我还没有添加文字，但我想像图像一样弯曲边框，但它没有.

I've not added text yet, but i want to border curved like image and it's not getting.

任何帮助将不胜感激.

推荐答案

您可以使用 SVG 来实现这种曲线设计.SVG 提供了几个元素及其属性(矩形、圆、线、折线、多边形、G 等).您可以根据需要定制设计.

You can achieve this curve design using SVG. SVG provides several elements and with its properties (Rect, Circle, Line, Polyline, Polygon, G, etc). You can customize design according to your need.

https://www.npmjs.com/package/react-native-svg?activeTab=versions

import Svg,{ Circle } from 'react-native-svg';


<Circle 
       cx={screenWidth / 2}
       cy={`-${898 - headerHeight + 2}`} 
       r="898.5" fill="#87ceeb"
       stroke="#87ceeb" 
      strokeWidth="2" 
/>

这篇关于我如何在 React Native 中实现以下设计?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！