react-native框架下，集成字体并应用全局

一、存放字体文件

将自定义字体文件（例如 .ttf 或 .otf 文件）放入项目的 assets/fonts 目录中。如果没有这个目录，可以手动创建。

二、配置字体

在项目根目录下建一个文件：react-native.config.js，文件内容如下：

// 现代项目（React Native 0.60 及以上）: 通常推荐使用 assets/fonts 目录配合 react-native.config.js 进行管理。
// 这种方式更加标准化，能够自动处理 iOS 和 Android 的资源集成。
// 执行命令链接字体： npx react-native-asset
module.exports = {
    assets: ['./src/assets/fonts'], // 确保路径正确
  };

 字体文件存放好之后，react-native.config.js建好之后，执行下面的命令链接字体

执行命令链接字体： npx react-native-asset

三、代码调用

 创建主题上下文文件 ThemeProvider

import React, { createContext, useContext, useState,useEffect  } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import ThemeBlue from '../themes/ThemeBlue'; // 导入主题1配置文件
import ThemeYellow from '../themes/ThemeYellow'; // 导入主题2配置文件

// 创建一个上下文来存储当前主题
const ThemeContext = createContext();

// 主题管理器组件，用于提供主题上下文
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(ThemeYellow); // 初始主题为 Theme1
 
  const [themeFont, setThemeFont] = useState(ThemesFont.ALGER); // 默认字体

  useEffect(() => {
    // 从 AsyncStorage 中获取上次保存的主题
    const loadTheme = async () => {
      try {
        const savedTheme = await AsyncStorage.getItem('appTheme');
        if (savedTheme) {
          setTheme(JSON.parse(savedTheme));
        }

        const savedThemeFont = await AsyncStorage.getItem('appThemeFont');
        if (savedThemeFont) {
          setThemeFont(savedThemeFont);
        }
      } catch (error) {
        console.error('Failed to load theme', error);
      }
    };

    loadTheme();//加载上次保存的主题
  }, []);

  // 切换主题的方法
  const changeTheme = (newTheme) => {
    try {
      setTheme(newTheme);
      AsyncStorage.setItem('appTheme', JSON.stringify(newTheme)); // 将新主题保存到 AsyncStorage
    } catch (error) {
      console.error('Failed to save theme', error);
    }
  };

  //切换字体的方法
  const changeThemeFont = (newFont) => {
    try {
      setThemeFont(newFont);
      AsyncStorage.setItem('appThemeFont', JSON.stringify(newFont)); // 将新字体保存到 AsyncStorage
    } catch (error) {
      console.error('Failed to save theme', error);
    }
  };
 
  return (
    <ThemeContext.Provider value={{ theme, changeTheme,themeFont,changeThemeFont }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义 hook 用于获取当前主题和切换主题方法
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

// 导出所有可用主题
export const Themes = {
  ThemeBlue,
  ThemeYellow,
};

// 导出所有字体
export const ThemesFont = {
  ALGER:"ALGER",
  ARIAL:"ARIAL",
  ARIBLK:"ARIBLK",
};

//在APP.tsx中引用    ThemeProvider
return (
      <ThemeProvider>
        <View style={styles.container}>

          <NavigationContainer>
            <AppNavigator initialRoute={initialRoute} />
          </NavigationContainer>

        </View>
      </ThemeProvider>
    );

//具体页面调用字体
<Text style={[{fontFamily: themeFont }]}>
  观察字体样式
</Text>