无法在本机反应中创建弯曲视图 [英] Unable to create curved view in react-native

问题描述

<View style={{
width: window.width,
height: window.width / 7, 
backgroundColor: colors.white}}>

<View style={{
    backgroundColor: colors.primary,
    borderBottomLeftRadius: 80,
    borderBottomRightRadius: 80,
    height: window.width / 7,
    width: window.width,
    flex: 1,
}}>
    <View style={{
        backgroundColor: '#000',
        height: window.width / 7,
        width: window.width / 3,
        borderRadius: 100,
        alignSelf: 'center',
        position: 'absolute',
        bottom: 0,
        overflow: 'hidden',
    }}>
    </View>
</View>

推荐答案

检查下面的解决方案

import * as React from "react";
import { View, StyleSheet } from "react-native";

export default function Curve() {
  return (
    <View style={{ margin: 50 }}>
      <View style={styles.squreStyle} />
      <View style={styles.arcStyle} />
    </View>
  );
}

const styles = StyleSheet.create({
  squreStyle: {
    width: "100%",
    height: 75,
    borderRadius: 12,
    backgroundColor: "black",
  },
  arcStyle: {
    width: "20%",
    height: 70,
    position: "absolute",
    bottom: -25,
    left: "40%",
    borderRadius: 35,
    backgroundColor: "black",
    transform: [{ scaleX: 5 }, { scaleY: 1 }],
  },
});

工作代码的示例图像

Edit - 根据 Scroll & 的要求修改在标题中写入内容.

Edit - Modified according to the requirements of Scroll & Write content inside header.

import * as React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";

export default function Curve() {
  return (
    <ScrollView>
      <View style={{marginVertical: 50}}>
        <View style={styles.squreStyle}>
          <Text style={{ color: "white", textAlign: "center" }}>Sample Header</Text>
        </View>
        <View style={styles.arcStyle} />
      </View>
      <View style={{ height: 500, backgroundColor: "green" }} />
      <View style={{ height: 500, backgroundColor: "yellow" }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  squreStyle: {
    width: "100%",
    height: 75,
    borderRadius: 12,
    backgroundColor: "black",
    zIndex: 1,
  },
  arcStyle: {
    width: "20%",
    height: 70,
    position: "absolute",
    bottom: -25,
    left: "40%",
    borderRadius: 35,
    backgroundColor: "black",
    transform: [{ scaleX: 5 }, { scaleY: 1 }],
  },
});

希望对你有帮助.如有疑问，请随意.

Hope this helps you. Feel free for doubts.

这篇关于无法在本机反应中创建弯曲视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！