无法从react-native-vector-icons / @expo/vector-icons

Question

我正在开发一个 React Native Expo 应用程序并使用来自

@expo/vector-icons

的图标。当我应用背景颜色来测试图标时，图标周围似乎有不需要的空间，阻止它接触背景边缘。

这是代码的简化版本：

import { View, StyleSheet } from 'react-native';
import { AntDesign } from "@expo/vector-icons";

export default function App() {
  return (
    <View style={styles.container}>
      <AntDesign name="close" style={styles.iconClose} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconClose: {
    fontSize: 120,
    backgroundColor: "lightgreen",
  },
});

这是说明问题的屏幕截图：

我尝试将图标放置在

View

组件内，其高度和宽度小于图标大小，以使空间不可见，但它不起作用：

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.iconCloseContainer}>
        <AntDesign name="close" style={styles.iconClose} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconCloseContainer: {
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red",
  },
  iconClose: {
    fontSize: 120,
    lineHeight: 80,
    alignSelf: "center",
    backgroundColor: "lightgreen",
  },
});

任何帮助或见解将不胜感激。谢谢！

Answer 1

您现在解决这个问题了吗？