Question

我想要得到的结果是：

我创建的结果是带有内部文字的图标：

该图标是使用SVG创建的，如下面的代码所示。

但是我获得的结果并不令我满意，考虑到第一个图像，我无法获得我提出的结果，问题如下。

1）图标部分的圆角，灰色区域。

我不知道如何使用svg做到这一点。

考虑到大小可以变化，并且灰色部分必须与建议的图像相似。

2）考虑到图标的大小可以更改，因此将日期的文本居中。

一些建议？

链接：Expo

代码：

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
  }
});

这里是工作中的example。

使用其中的日期来响应本地Svg图标日历

1 个答案: