如何在本机反应中实现其中包含文本的水滴形状，如下图所示

Question

我想要实现在本机反应中包含文本的水滴形状，如下图所示。

Answer 1

正如 Tim 所说，您可以使用 SVG 来实现此目的。但是，您的形状也可以通过利用旋转和边框半径属性来绘制。

我在 expo.io 上做了一个非常基本的小吃，应该可以帮助您入门。

基本液滴

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

export default class App extends React.Component {
  render() {
    return (
      <View style={{
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
      }}>
        <View style={{
          alignItems: 'center',
          justifyContent: 'center',
          width: 40,
          height: 40,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          borderBottomLeftRadius: 20,
          backgroundColor: 'tomato',
          transform: [{ rotateZ: '45deg' }]
        }}>
          <Text style={{ color: 'white', transform: [{ rotateZ: '-45deg' }], fontWeight: 'bold', fontSize: 14 }}>
            12.4
          </Text>
        </View>
      </View>
    );
  }
}