Сделать радиус границы больше половины высоты - PullRequest
Новая
       6

Сделать радиус границы больше половины высоты

0 голосов
/ 08 ноября 2018

Я хочу сделать компонент с «закругленным дном», без использования ImageBackground, например: enter image description here

Я пытался использовать комбинацию <LinearGradient/>,но чтобы упростить код в этом вопросе, я использовал <View/>.

Вот мой код: 

import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'

export default class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={classes.container}>
        <View style={classes.block} />
        <View style={classes.roundedBlock} />
      </View>
    )
  }
}

const classes = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
  },
  block: {
    height: 135,
    backgroundColor: 'red',
  },
  roundedBlock: {
    height: 15,
    backgroundColor: 'red',
    width: Dimensions.get('window').width,
    borderBottomLeftRadius: Dimensions.get('window').width / 2,
    borderBottomRightRadius: Dimensions.get('window').width / 2,
  }
})

Этот код доступен для целей тестирования на Expo Snack

Вот результат:

enter image description here

Как видите, borderRadius ограничен до7.5px, что составляет половину высоты блока вместо половины ширины , как требуется.

Есть ли способ переопределить этот предел?Если нет, есть ли способ добиться того, чего я хочу?

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете использовать ART из react-native, чтобы нарисовать все, что вы хотите нарисовать. Некоторые неофициальные документы https://github.com/react-native-china/react-native-ART-doc/blob/master/doc.md. Пожалуйста, проверьте Expo Snack или код ниже. 

import React from 'react';
import { Dimensions, StyleSheet, View, ART } from 'react-native';

const {
  Surface,
  Shape,
  Path,
  RadialGradient,
  Pattern,
  Transform,
  LinearGradient,
} = ART;
const width = Dimensions.get('window').width;
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  getPathRect = () => {
    const x = width;
    const y = 0;
    const radius = 1000;

    return ART.Path()
      .moveTo(x, y)
      .lineTo(x - width, y)
      .lineTo(x - width, y + width / 2)
      .lineTo(x, y + width / 2)
      .close();
  };

  getPathArc = () => {
    const x = width;
    const y = 0;
    const radius = 1000;
    return ART.Path()
      .moveTo(x, y + width / 2)
      .arc(-x, 0, radius, radius)
      .close();
  };

  gradient = () => {
    return new LinearGradient(
      {
        '.01': 'blue', // blue in 1% position
        '1': 'red', // opacity white in 100% position
      },
      '0',
      '0',
      width,
      '0'
    );
  };

  render() {
    return (
      <View style={classes.container}>
        <Surface width={width} height={width}>
          <Shape
            d={this.getPathRect()}
            fill={this.gradient()}
            // stroke="red"
            strokeWidth="1"
            strokeCap="butt"
            strokeJoin="bevel"
          />
          <Shape
            d={this.getPathArc()}
            fill={this.gradient()}
            // stroke="red"
            strokeWidth="1"
            strokeCap="butt"
            strokeJoin="bevel"
          />
        </Surface>
      </View>
    );
  }
}

const classes = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
  },
});
...