Реагировать на собственный календарь Svg иконка с датой внутри

Question

Результат, который я хочу получить:

Результат, который я создал, значок с надписью внутри:

Значок был создан с использованием SVG, как видно из приведенного ниже кода.

Но полученный результат меня не удовлетворяет, я не могу получить полученный результатПредложено рассмотреть первое изображение, проблемы заключаются в следующем.

1) Закругленные углы в части значка, серая область.

Я не знаю, как я могу это сделать, используяsvg.

Учитывая, что размер может варьироваться, а серая часть должна быть аналогична предложенному изображению.

2) Централизовать текст даты, учитывая, что размер значка может измениться.

Несколько советов?

Ссылка: Экспо

Код:

import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Constants, Svg } from 'expo';
import { MaterialCommunityIcons } from '@expo/vector-icons';

var size = 30; //300

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to
          get a shareable url.
        </Text>
        <MaterialCommunityIcons name="calendar-blank" size={30} color="#000" />
        <View style={{ flexDirection: 'row' }}>
          <Svg height={size} width={size}>
            <Svg.Rect x={0} y={0} width={size} height={size} fill="#000" />
            <Svg.Rect
              x={size / 12}
              y={size / 6}
              width={size - size / 6}
              height={size - 6.5}
              fill="#fff"
            />
            <Svg.Text fontSize={size / 2} x={size / 4} y={size / 1.5}>
              21
            </Svg.Text>
          </Svg>
          <MaterialCommunityIcons
            name="calendar-blank"
            size={30}
            color="#000"
          />
        </View>

        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to
          get a shareable url.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

Answer 1

Моя идея немного отличается: иметь одну оболочку (компонент View) и использовать значок календаря в качестве "фонового изображения".Затем поместите динамический номер даты в середине этой оболочки:

<View style={styles.calendar}>
     <MaterialCommunityIcons name="calendar-blank" size={30} color="#000" style={styles.calendarIcon} />
     <Text style={styles.date}>21</Text>
</View>

Стили:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  calendar: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    width: 30,
    height: 30, 
  },
  calendarIcon: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  date: {
    fontSize: 9,
    marginTop: 4
  }
});

Вот рабочий пример .