Невозможно создать изогнутый вид в реагирующем

Question

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

Answer 1

Проверьте решение ниже прокрутки и записи содержимого внутри заголовка.

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

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

Вы можете использовать Reaction-native-canvas для его рисования

import {Dimensions} from 'react-native';
import Canvas from 'react-native-canvas';
const {width} = Dimensions.get('window');
...
drawArc = (canvas) => {
  const height = 150;
  const ctx = canvas.getContext('2d');
  context.moveTo(0,height/2);
  context.quadraticCurveTo(width/2, height, width, height/2);
};
...


<Canvas
  ref={canvas => drawArc(canvas) />

...

Надеюсь, это поможет вам.

Answer 3

Эта вещь реагирует сама по себе и не позволяет добавлять радиус границы к сторонам, если они не имеют одинаковую высоту и ширину, так что это может быть круг. То, что я сделал, в точности создало круг и подтолкнуло его вверх top, чтобы это выглядело так. Вы можете контролировать кривизну, фиксируя высоту и ширину и делая ее динамической c, чтобы на каждом экране она выглядела одинаково. Пожалуйста, проверьте код ниже, а также закусочную экспо:

Экспо-закуска

Код:

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


export default function App() {
  return (
    <View style={styles.container}>
     <View style={styles.newD}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  newD:{
    height:500,
    width:500,
    backgroundColor:'red',
    marginLeft:-70,
    borderRadius:500,
    top:-280
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Надеюсь, это поможет. не стесняйтесь сомнений