React Native Button图标不显示求助（Expo Snack 36.0.0环境）

我之前也踩过类似版本兼容的坑，结合Expo 36的特性，你的问题大概率出在版本不匹配或者字体未正确加载上，下面是具体的排查和解决步骤：

1. 对齐React Native Paper与Expo 36的兼容版本 #

Expo 36对应的React Native版本是0.61.4，而较新的React Native Paper版本（比如4.x及以上）依赖更高版本的RN/Expo，这会直接导致图标渲染异常。你需要在Snack的依赖列表里指定适配的版本：

• 将react-native-paper的版本修改为^3.10.1（这个版本完美适配RN 0.61/Expo 36）

2. 手动加载Material Icons字体 #

React Native Paper的按钮图标依赖Material Icons字体，Expo 36不会自动加载这个字体，你需要在根组件里手动配置加载逻辑：

import React, { useState, useEffect } from 'react';
import * as Font from 'expo-font';
import { PaperProvider, Button } from 'react-native-paper';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    async function loadRequiredFonts() {
      await Font.loadAsync({
        'Material Icons': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
      });
      setFontsLoaded(true);
    }
    loadRequiredFonts();
  }, []);

  if (!fontsLoaded) {
    return null; // 也可以替换成自定义加载指示器
  }

  return (
    <PaperProvider>
      <Button 
        icon="camera" 
        mode="contained" 
        onPress={() => console.log('Button pressed')}
        style={{ margin: 20 }}
      >
        Take Photo
      </Button>
    </PaperProvider>
  );
}

3. 确认图标名称的有效性 #

如果图标名称拼写错误或者不属于Material Icons的标准名称，也会显示为空白矩形。请确保你使用的是官方支持的图标名称（比如camera、menu、check这类通用名称）。

4. 重置Snack环境重试 #

有时候Snack的依赖缓存会导致异常，你可以尝试：

• 刷新Snack页面
• 先移除react-native-paper依赖，再重新添加
• 点击Snack界面的"重新加载"按钮重置项目环境

按照这些步骤操作后，按钮图标应该就能正常显示了。

内容的提问来源于stack exchange，提问作者Chito Adinugraha