react-native 无法达到我想要的边界半径结果答案

【问题标题】：react-native cant achieve borderRadius result as I wantreact-native 无法达到我想要的边界半径结果
【发布时间】：2020-05-19 07:43:25
【问题描述】：

大家好，所以我尝试添加两个心形图标，如下图所示：

我尝试制作这些组件：

<View style={styles.buttonContainer}>
        <View style={styles.xButton} />
        <View style={styles.heartButton} />
      </View>

我的风格：

const styles = StyleSheet.create({
  heartButton: {
    backgroundColor: '#FB4C61',
    height: 80,
    width: 60,
    borderTopLeftRadius: 100,
    borderBottomLeftRadius: 100,
    // borderRadius: 10,
    // borderWidth: 1,
    // borderColor: '#fff',
  },
  xButton: {
    backgroundColor: '#182343',
    height: 80,
    width: 60,
    alignSelf: 'center',
    borderTopRightRadius: 100,
    borderBottomRightRadius: 100,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    zIndex: 999,
    alignItems: 'center',
    top: 200,
  },

我在手机中得到的结果：

我正在使用 figma 进行设计，也许我应该导出所有项目并将其添加为图像？

【问题讨论】：

是的，我也建议你使用图像而不是为这种类型的曲线设计创建边框。

标签： react-native react-native-stylesheet

【解决方案1】：

您可以创建具有特定边界半径的视图并将其转换为如下角度。

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

const styles = StyleSheet.create({
  my_component: {
    width: 110,
    height: 110,
    position: 'absolute',
    backgroundColor: 'black',
    borderStyle: 'solid',
    borderLeftColor: 'transparent',
    borderTopStartRadius: 45,
    borderRightColor: 'transparent',
    borderBottomColor: 'red',
    top: '40%',
    transform: [{rotate: '135deg'}],
  },
  leftComponent: {
    transform: [{rotate: '135deg'}],
    left: -55,
  },
  rightComponent: {
    transform: [{rotate: '315deg'}],
    right: -55,
  },
});

class Page extends Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#ffffff'}}>
        <View style={[styles.my_component, styles.leftComponent]} />
        <View style={[styles.my_component, styles.rightComponent]} />
      </View>
    );
  }
}

export default Page;

位置设置为绝对。实现的结果如下：screenshot.jpg

我没有添加任何图标，但图标也必须使用 position: 'absolute' 定位并相应地移动它们。

我相信结果最接近您想要达到的目标。

【讨论】：

【解决方案2】：

我认为这样的事情会给你塑造你的形状 (expo snack)

在渲染中：

  <View style={styles.topFlag} />
  <View style={styles.centerFlag} />
  <View style={styles.bottomFlag} />

风格

  centerFlag: {
    height: 20, 
    width: 60, 
    backgroundColor: "green",
    borderLeftColor: "green", 
    borderTopRightRadius: 9,
    borderBottomRightRadius: 10,
  },
  bottomFlag: {
    height: 30, 
    width: 0, 
    borderBottomColor: "transparent",
    borderLeftColor: "green", 
    borderLeftWidth: 52,
    borderBottomWidth: 30,
  },
  topFlag: {
    height: 30, 
    width: 0, 
    borderTopColor: "transparent",
    borderLeftWidth: 52,
    borderLeftColor: "green", 
    borderTopWidth: 30,
  }

你可以在this tuto获得灵感

【讨论】：