一、存放字体文件
将自定义字体文件(例如 .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>