我如何在React Native中实现以下设计？

Question

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

My code is here,

<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.

Any help would be appreciated.

Answer 1

Use the following style to your curved view,

curvedViewStyle: {
    borderRadius: window.width,
    width: window.width * 2,
    height: window.width * 2,
    marginLeft: -(window.width / 2),
    position: "absolute",
    bottom: 0,
    overflow: "hidden",
    backgroundColor: "red"
  },

and don't forgot to add 'window' on top, const window = Dimensions.get("window");

Answer 2

In order to get a circle, you need to create a square (width === height) and set the borderRadius to halve of its width or height.

In your case; you need to calculate the value for getting only the 30% of the bottom side showing (use negative marginTop), and also calculate how the value for making sure the center of the circle to be the same as the center of screen width (use negative marginLeft). Below are an example of this.

render() {
    return (
      <View style={myStyle.container}>
        <View style={myStyle.top_background}>
          <View style={myStyle.top_content}>
            <Text style={myStyle.text1}>Hey there</Text>
            <Text style={myStyle.text1}>WHAT'S UP</Text>
            <Text style={myStyle.text1}>Doc'?</Text>
            <Text style={myStyle.text2}>BUGS BUNNY</Text>
          </View>
        </View>
      </View>
    );
}

and the stylesheet

const sWidth  = Dimensions.get('window').width;
const sHeight = Dimensions.get('window').height;
const ratio   = sWidth / sHeight; //sWidth = ratio * sHeight
const myStyle = StyleSheet.create({
  container: {
    width: sWidth,
    height: sHeight,
    backgroundColor: '#fff'
  },
  top_background: {
    width: sHeight * 2,
    height: sHeight * 2,
    borderRadius: sHeight * 1,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    backgroundColor: '#aaa',
    alignItems: 'center',
    marginLeft: ((ratio * sHeight) * 0.5) - (sHeight),
    marginTop: -sHeight * 1.7,
    paddingTop: sHeight * 1.7,
  },
  top_content: {
    paddingTop: sHeight * 0.02,
    width: sWidth,
    height: sHeight * 0.3,
    alignItems: 'center',
  },
  text1: {
    fontSize: 14,
    color: '#fff'
  },  
  text2: {
    marginTop: sHeight * 0.1,
    fontSize: 25,
    fontWeight: 'bold',
    color: '#fff'
  }
});

the marginTop and paddingTop in top_background is for only using the top 30% of the screen and starts the content in the section that can be seen in the screen respectively.

Answer 3

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" 
/>