修复图标显示bug

App.tsx

@@ -1,3 +1,25 @@
+// /**
+//  * Sample React Native App
+//  * https://github.com/facebook/react-native
+//  *
+//  * @format
+//  */
+//
+// import React from 'react';
+// import Navigation from './src/navigation';
+// import {ThemeProvider} from './src/contexts/ThemeContext';
+//
+// function App(): JSX.Element {
+//   return (
+//     <ThemeProvider>
+//       <Navigation />
+//     </ThemeProvider>
+//   );
+// }
+//
+// export default App;
+
+
 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
@@ -5,11 +27,60 @@
  * @format
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Navigation from './src/navigation';
 import {ThemeProvider} from './src/contexts/ThemeContext';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
 
 function App(): JSX.Element {
+  const [fontLoaded, setFontLoaded] = useState(false);
+  const [fontError, setFontError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadFont = async () => {
+      try {
+        // 先检查字体是否已加载
+        const isLoaded = await MaterialIcons.hasIcon('home');
+
+        if (!isLoaded) {
+          console.log('Material Icons not loaded. Loading now...');
+          await MaterialIcons.loadFont();
+        }
+
+        // 确认字体是否加载成功
+        const fontName = MaterialIcons.getFontFamily();
+        console.log(`Font loaded successfully: ${fontName}`);
+        setFontLoaded(true);
+      } catch (error) {
+        console.error('Font loading failed:', error);
+        setFontError('Failed to load icon fonts');
+      }
+    };
+
+    // 加入延迟以解决模拟器启动时的问题
+    const timeout = setTimeout(() => {
+      loadFont();
+    }, 500);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  // 显示加载状态或错误信息
+  if (!fontLoaded || fontError) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" />
+        <Text style={styles.statusText}>
+          {fontError || 'Loading icons...'}
+        </Text>
+        <Text style={styles.debugText}>
+          Using MaterialIcons font family: {MaterialIcons.getFontFamily()}
+        </Text>
+      </View>
+    );
+  }
+
   return (
     <ThemeProvider>
       <Navigation />
@@ -17,4 +88,24 @@ function App(): JSX.Element {
   );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  statusText: {
+    marginTop: 20,
+    fontSize: 16,
+    color: '#333',
+  },
+  debugText: {
+    marginTop: 10,
+    fontSize: 12,
+    color: '#666',
+    fontFamily: 'monospace',
+  },
+});
+
 export default App;

android/app/build.gradle

@@ -1,6 +1,7 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 /**
  * This is the configuration block to customize your React Native Android app.