如何使用@expo/vector-icons为React Native/Expo应用创建方形背景图标？

要实现示例中带方形背景的图标，你可以通过封装自定义组件的方式快速复用，步骤如下：

1. 确认依赖安装 #

Expo项目默认已集成@expo/vector-icons，如果你的项目没有安装，执行以下命令：

expo install @expo/vector-icons

2. 封装可复用的SquareIcon组件 #

创建一个自定义组件，将矢量图标包裹在方形背景View中，支持自定义背景色、图标颜色、尺寸等参数：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons'; // 可替换为FontAwesome、MaterialIcons等其他库

const SquareIcon = ({ name, size = 20, iconColor = '#ffffff', bgColor = '#333333' }) => {
  // 背景尺寸比图标大8px，保证图标有足够留白
  const bgSize = size + 8;
  
  return (
    <View style={[styles.iconBg, { width: bgSize, height: bgSize, backgroundColor: bgColor }]}>
      <Ionicons name={name} size={size} color={iconColor} />
    </View>
  );
};

const styles = StyleSheet.create({
  iconBg: {
    borderRadius: 6, // 可选：添加圆角适配示例风格
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SquareIcon;

注：如果需要用其他图标库，只需替换导入的图标组件即可，用法完全一致。

3. 在列表或页面中使用组件 #

把封装好的SquareIcon和文本搭配，放在列表项里，就能实现示例中的效果：

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import SquareIcon from './SquareIcon';

const SettingScreen = () => {
  const settings = [
    { id: '1', title: '账号设置', icon: 'person' },
    { id: '2', title: '通知管理', icon: 'notifications' },
    { id: '3', title: '隐私设置', icon: 'shield' },
    { id: '4', title: '帮助与反馈', icon: 'help-circle' },
  ];

  return (
    <FlatList
      data={settings}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.listItem}>
          <SquareIcon name={item.icon} bgColor="#5C6BC0" iconColor="#fff" />
          <Text style={styles.itemTitle}>{item.title}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  itemTitle: {
    fontSize: 16,
    marginLeft: 16,
  },
});

export default SettingScreen;

自定义调整 #

• 修改borderRadius值可切换纯方形/圆角方形风格
• 调整bgSize变量能改变背景与图标的间距
• 可给背景View传入额外style参数，实现更灵活的样式定制

内容的提问来源于stack exchange，提问作者Athena Wisdom