react-native 无法实现我想要的 borderRadius 结果

Question

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

我尝试制作这些组件：

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

我在 phone 中得到的结果：

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

Answer 1

我认为这样的东西会给你你的形状 (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

中获得灵感

Answer 2

您可以创建一个具有特定 borderRadius 的视图，并将其转换成如下所示的角度。

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' 定位并相应地移动它们。

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

react-native 无法实现我想要的 borderRadius 结果

react-native cant achieve borderRadius result as I want

react-native

react-native-stylesheet