代码之家 › 专栏 › 技术社区 › Paul

包含日期的React native Svg图标日历

icons resize svg react-native

0

Paul · 技术社区 · 7 年前

我想得到的结果是:

我创建了一个图标,里面写着:

该图标是使用SVG创建的,可以从下面的代码中看到。

但我得到的结果并不满足我,我不能得到我提出的结果,考虑到第一个图像,问题如下。

1) 圆角部分的图标,灰色区域。

考虑到图像的大小会发生变化,并且灰度部分必须与所提出的图像相似。

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

0 回复 | 直到 7 年前

1

Hristo Eftimov Martin Fürholz 7 年前

我的想法有点不同:有一个包装纸 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