一、存放字体文件
将自定义字体文件（例如 .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); // 初始主题为 Theme1const [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>
