如何在React Native中不使用第三方库为按钮添加系统图标

先说明你的示例代码情况 #

原生React Native自带的Button组件并不支持icon、fontWeight、backgroundColor这些属性，你贴的代码应该是用了第三方UI库（比如React Native Elements）封装的Button组件，这类库内置了图标支持能力。

使用第三方图标库（如Font Awesome） #

如果想用这类第三方库快速实现，步骤如下：

1. 安装对应的UI库和图标库：

npm install @rneui/themed @fortawesome/react-native-fontawesome @fortawesome/free-brands-svg-icons

2. 在代码中引入并使用：

import { Button } from '@rneui/themed';
import { faFacebook } from '@fortawesome/free-brands-svg-icons';

// 组件内使用
<Button
  fontWeight='bold'
  backgroundColor='#3b5998'
  icon={{ icon: faFacebook, color: 'white' }}
  title='Connect With Facebook'
/>

不使用任何第三方库的实现方式 #

方案1：利用iOS SF Symbols（仅iOS） #

React Native 0.63+支持直接通过Image组件的systemName属性加载iOS系统自带的SF Symbols图标：

import { Pressable, Image, Text, StyleSheet } from 'react-native';

const FacebookButton = () => {
  return (
    <Pressable style={styles.buttonWrap}>
      <Image 
        style={styles.icon} 
        systemName="facebook" 
        tintColor="white" 
      />
      <Text style={styles.buttonText}>Connect With Facebook</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  buttonWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#3b5998',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 6,
  },
  icon: {
    width: 22,
    height: 22,
    marginRight: 10,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

方案2：使用系统字体图标（跨平台） #

iOS的SF Symbols和Android的Material Icons都是系统自带的字体图标，可通过Text组件加载对应的Unicode字符：

import { Pressable, Text, StyleSheet, Platform } from 'react-native';

const FacebookButton = () => {
  // 对应平台的图标Unicode
  const facebookIcon = Platform.select({
    ios: '􀆐', // SF Symbols的facebook图标Unicode
    android: '' // Material Icons的facebook图标Unicode
  });

  return (
    <Pressable style={styles.buttonWrap}>
      <Text style={[styles.icon, Platform.OS === 'android' && styles.androidIcon]}>
        {facebookIcon}
      </Text>
      <Text style={styles.buttonText}>Connect With Facebook</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  buttonWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#3b5998',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 6,
  },
  icon: {
    fontSize: 22,
    color: 'white',
    marginRight: 10,
    fontFamily: Platform.OS === 'ios' ? 'SF Symbols' : undefined,
  },
  androidIcon: {
    fontFamily: 'MaterialIcons',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

注：Android的Material Icons字体默认已包含在React Native项目中，如果缺失，可将字体文件放入assets/fonts目录，并在react-native.config.js中配置字体资源。

方案3：自定义图标资源（完全原生） #

如果需要完全自定义，可将图标图片放入iOS的Images.xcassets和Android的res/drawable目录，然后通过Image组件加载：

import { Pressable, Image, Text, StyleSheet } from 'react-native';

const FacebookButton = () => {
  return (
    <Pressable style={styles.buttonWrap}>
      <Image 
        style={styles.icon} 
        source={require('./assets/facebook-icon.png')} 
      />
      <Text style={styles.buttonText}>Connect With Facebook</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  buttonWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#3b5998',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 6,
  },
  icon: {
    width: 22,
    height: 22,
    marginRight: 10,
    tintColor: 'white',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

内容的提问来源于stack exchange，提问作者Naresh Mekala