React Native中FAB及按钮图标无法显示的问题求助

我尝试为FAB（浮动操作按钮）添加图标，但图标无法正常显示，当前使用的代码是：

<FAB title="Add new box" upperCase icon={{ name: 'add', color: 'white' }}/>

项目环境版本 #

• react native: 0.69.5
• @rneui/base: ^0.0.0-edge.2
• @rneui/themed: ^0.0.0-edge.2
• react-native-vector-icons: ^9.2.0

已尝试的手动配置步骤 #

1. 执行npm install --save react-native-vector-icons安装依赖
2. 将Fonts文件夹内容复制到android/app/src/main/assets/fonts
3. 编辑android/settings.gradle并添加配置：

include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

完整settings.gradle内容：

rootProject.name = 'AwesomeProject'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
    include(":ReactAndroid:hermes-engine")
    project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
}

4. 编辑android/app/build.gradle，添加implementation project(':react-native-vector-icons')，相关内容：

import org.apache.tools.ant.taskdefs.condition.Os

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.1.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }

    implementation project(':react-native-vector-icons')
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

5. 编辑android/app/src/main/java/MainApplication.java，添加VectorIconsPackage，完整内容：

package com.awesomeproject;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.awesomeproject.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

import com.oblador.vectoricons.VectorIconsPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new VectorIconsPackage());
          
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  private final ReactNativeHost mNewArchitectureNativeHost =
      new MainApplicationReactNativeHost(this);

  @Override
  public ReactNativeHost getReactNativeHost() {
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      return mNewArchitectureNativeHost;
    } else {
      return mReactNativeHost;
    }
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // If you opted-in for the New Architecture, we enable the TurboModule system
    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.awesomeproject.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

修复方案 #

1. 修正android/app/build.gradle的依赖位置 #

你当前把implementation project(':react-native-vector-icons')放在了buildscript的dependencies块中，这是错误的。该依赖必须放在模块级的dependencies块里，也就是android/app/build.gradle文件中独立的dependencies节点下：

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    // 其他项目依赖...
    implementation project(':react-native-vector-icons') // 移到此处
}

2. 明确指定图标字体库类型 #

@rneui的FAB组件需要明确图标所属的字体库，修改你的FAB代码：

<FAB 
  title="Add new box" 
  upperCase 
  icon={{ 
    name: 'add', 
    color: 'white',
    type: 'material' // 指定为Material图标库
  }} 
/>

3. 清理缓存并重新构建 #

• 进入android目录执行缓存清理：cd android && ./gradlew clean
• 回到项目根目录，重启Metro并清除缓存：npx react-native start --reset-cache
• 重新运行项目：npx react-native run-android

4. 验证字体文件完整性 #

确保react-native-vector-icons/Fonts下的所有字体文件（尤其是MaterialIcons.ttf）都完整复制到android/app/src/main/assets/fonts目录，文件名需完全一致，不可修改。

5. 排查自动链接冲突 #

React Native 0.60+支持自动链接，手动添加的配置可能与之冲突：

• 移除settings.gradle中的手动配置代码
• 移除MainApplication.java里的packages.add(new VectorIconsPackage());
• 执行自动链接命令：npx react-native link react-native-vector-icons
• 再次清理缓存并重新构建项目

内容的提问来源于stack exchange，提问作者Raana Tashakori