Question

我有点想在我的一个应用程序中实现低于设计的水平。

我的代码在这里，

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

我还没有添加文本，但是我想像图像一样弯曲边界，但是没有得到。

任何帮助将不胜感激。

Answer 1

对您的曲面视图使用以下样式，

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

不要忘记在顶部const window = Dimensions.get("window");

添加“窗口”

Answer 2

为了得到一个圆，您需要创建一个正方形（宽度===高度），并将borderRadius设置为其宽度或高度的一半。

在您的情况下；您需要计算仅获取显示的底侧的30％的值（使用负marginTop），还需要计算确保圆心与屏幕宽度的中心相同的值（使用负数marginLeft）。下面是一个示例。

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>
    );
}

和样式表

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'
  }
});

top_background中的marginTop和paddingTop仅用于使用屏幕的前30％，并分别在屏幕上可以看到的部分中启动内容。

Answer 3

您可以使用SVG实现此曲线设计。 SVG提供了几种元素及其属性（Rect，Circle，Line，Polyline，Polygon，G等）。您可以根据需要自定义设计。

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中实现以下设计？

3 个答案: