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

news2024/11/16 13:38:19

一、存放字体文件

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2088457.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据类型6.2.1

c语言的变量要先定义&#xff0c;而且要用确定类型 c以后的语言 c jave更强调类型&#xff0c;对类型的检查更严格 JavaScript。Python。PHP不看重类型&#xff0c;甚至不需要事先定义 c语言的类型 整数 char &#xff0c; short&#xff0c; int…

【MATLAB源码-第257期】基于matlab的QPSK调制解调COSTAS环载波同步仿真,对比前后星座图,输出锁相环响应曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 QPSK&#xff08;Quadrature Phase Shift Keying&#xff0c;正交相移键控&#xff09;调制是一种常见的数字调制方式。它通过将比特数据映射到四个相位状态上来传输信息。每个符号代表两个比特的数据&#xff0c;因此与BPSK…

map和set(C++)

1.关联式容器 关联式容器&#xff1a;内部储存的是key或者k-v模型的数据 k-v模型&#xff1a;键值对 在STL中&#xff0c;键值对实际就是一个泛型的类&#xff0c;pair---->first(key) second(value) 分类&#xff1a;从底层数据结构上 红黑树结构 &#xff1a; …

单击视角复位按钮,即可看到整个地球【mars3d】

1.需要设置下初始默认视角&#xff0c;地图属性参数里面得 scene: { center: { 这个需要拿到一个参数&#xff0c;可以在示例里面随便抓一个想要的右键获取下 拿到之后再设置下&#xff0c;参考代码之后&#xff0c;就可以单击视角复位按钮&#xff0c;就回到可以看到整个地球…

19050 牛牛打气球

### 思路 1. **输入读取**&#xff1a; - 读取 n&#xff0c;a 和 b。 - 读取每个气球的坚韧度。 2. **计算最少释放次数**&#xff1a; - 使用二分查找来确定最少的释放次数。 - 每次释放武器时&#xff0c;选择一个气球多承受 a 点伤害&#xff0c;其他气球承受…

最简洁!四步完成C#——opencv环境配置

一.创建C#环境 二.右键点击管理NuGet 三.下载opencv环境 四.测试写入 using OpenCvSharp 不保存就完成了配置啦

Cycle inside Runner; building could produce unreliable results.

报错 Showing Recent Messages Cycle inside Runner; building could produce unreliable results. Cycle details: → Target Runner ○ That command depends on command in Target Runner: script phase “Thin Binary” ○ Target Runner has process command with outpu…

性能测试的基本概念

学习前的认知 我们在学习性能测试之前&#xff0c;需要有个新的认识&#xff1a;性能测试&#xff0c;不再是像功能测试一样单纯的找 Bug&#xff0c;而是去找性能指标 转变思维 在做功能测试、自动化测试的时候&#xff0c;我们基本都是依托界面进行测试&#xff0c;也称 GU…

人工智能训练师工作内容及职业发展路径

人工智能训练师&#xff08;AI Trainer&#xff09;是一种专业职位&#xff0c;主要负责训练和优化人工智能系统&#xff0c;尤其是机器学习模型。他们的工作涉及到以下几个方面&#xff1a; 1、数据准备&#xff1a;训练师需要收集、清洗和预处理数据&#xff0c;以确保数据的…

大语言模型训练数据常见的4种处理方法

大语言模型训练需要数万亿的各类型数据。如何构造海量“高质量”数据对于大语言模型的训练具有至关重要的作用。虽然&#xff0c;截止到2023 年9 月为止&#xff0c;还没有非常好的大模型的理论分析和解释&#xff0c;也缺乏对语言模型训练数据的严格说明和定义。但是&#xff…

rabbitmq发送的消息接收不到

1.消息被其他消费者消费 2.主要说的2这种情况&#xff0c;就是在延迟队列中&#xff0c;忘记给一个bean加注解导致日志报exchange not found. 这个报错&#xff0c;进而引发了bindings没有绑定。没有绑定的话&#xff0c;发送消息就会接收不到。

python-带空格的数字层三角形

[题目描述] 输入一个整数n&#xff0c;输出一个带空格的数字层状三角形。输入&#xff1a; 输入共一行&#xff0c;为一个整数n。输出&#xff1a; 输出一个带空格的数字层状三角形。样例输入1 8 样例输出1 11111111 2222222 333333 44444 5555 …

亦菲喊你来学机器学习(16) --K-means聚类算法

文章目录 K-means基本步骤优缺点构建模型 总结 K-means K-means 算法是一种广泛使用的聚类算法&#xff0c;旨在将数据集划分为 K 个簇&#xff0c;使得每个簇内的数据点尽可能相似&#xff0c;而不同簇之间的数据点尽可能不同。这个算法通过迭代的方式实现&#xff0c;每次迭…

三耐环保家族控股99.17%:分红6000多万再补流,董事长董秘一年3次被警示

《港湾商业观察》施子夫 王璐 持续冲刺北交所的杭州三耐环保科技股份有限公司&#xff08;以下简称&#xff0c;三耐环保&#xff09;日前收到第三轮审核问询函&#xff0c;其保荐机构为民生证券。 值得关注的是&#xff0c;第三轮审核问询函依旧围绕的问题是&#xff0c;进…

linux系统修改/etc/profile,修改错了,再打开乱码

执行vim /etc/profile&#xff0c; 在文件末尾增加两行配置&#xff0c;可能是$符号写错了&#xff0c;输入:x保存&#xff0c;提示输入密码(help cm),然后输入两次cm 执行source /etc/profile 提 示文件错误字段 执行cat profile结果如下&#xff1a; 这有没有办法还原啊…

省略号(一行多行)vue3

组件 <template><div ref"tooltipParentRef" class"moreTipText"><el-tooltip:placement"props.placement"effect"dark":enterable"true":show-after"200":offset"10":popper-class&qu…

声纹API验证快速检索技术实现

一、实现思路&#xff0c;假如我们有4个人员&#xff0c;要从中快速找到4号的发音&#xff0c;那么我们就可以使用声纹API验证技术。 二、首先我们要创建特征库&#xff0c;然后分别添加到特征库里&#xff0c;随后找另一个人发音不同的音频去快速定位寻找。 三、比如我们要找到…

什么是集成测试?它和系统测试的区别是什么?

01 什么是集成测试&#xff1f; 集成测试是软件测试的一种方法&#xff0c;用于测试不同的软件模块之间的交互和协作是否正常。集成测试的主要目的是确保不同的软件模块能够无缝协作&#xff0c;形成一个完整的软件系统&#xff0c;并且能够满足系统的需求和规格。 在集成测试…

yml Unused property

问题描述 以前用的好好的项目,今天突然打开就发现idea不识别spring配置信息显示未引用,如果config代码中引入的配置却可以高亮显示,然后输入spring相关的配置,文件是没有提示的。经过研究发现是spring相关的插件被关闭了。效果如下 解决方法 启用三个插件spring Boot,Sp…

openEuler:ssh 管理和安全

ssh 简介 ssh 为 secure shell&#xff0c;是一种网络安全协议&#xff0c;通过加密和认证的方式实现远程安全登录&#xff0c;文件传输等服务。利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。 但是在近期&#xff0c;OpenSSH 爆出首个远程执行漏洞 CVE-2024-6387 …