React Native字体适配解决方案

最新推荐文章于 2024-07-15 00:32:15 发布
置顶 最新推荐文章于 2024-07-15 00:32:15 发布
阅读量3.7k 收藏 6
点赞数 6
文章标签： 字体适配 Android iOS React Native 优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718120/article/details/90112623
版权
本文介绍了React Native中如何解决字体随系统字体改变的问题，包括Text和TextInput组件的字体缩放，以及如何处理Android和iOS上的特殊状况。通过设置allowFontScaling，使用PixelRatio.getFontScale以及自定义Text组件，确保App的字体样式不被系统设置影响。
摘要由CSDN通过智能技术生成

 

源码已上传 Github:  react-native-app-font

“怎么又是字体，老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇！”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单：如何控制App字体不随系统字体改变？

系统字体改变 一般有两种情况：

（1）调整系统字体缩放

（2）修改系统字体样式（方正体、彩云等等）

Text 组件字体缩放

手机设置中我们可以调整字体的大小来控制手机字体的显示。一般情况下很多App并没有考虑系统字体大小改变所带来的UI影响。所以，当用户调整系统字体大小后，App当前的UI布局因为尺寸未适配的原因导致布局错乱。如何快速解决这个问题呢？其实官方在字体缩放为我们提供了解决办法：allowFontScaling。只需要将Text组件的该属性设置为false。当修改系统字体大小时，App中的Text大小就不会随之改变。此时，我

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Songlcy
关注
专栏目录
订阅专栏
react-native-fonts：在React Native项目中开箱即用的字体
02-05
开箱即用的React Native中可用的字体 如果我错过了字体，请提交公关或问题 要在项目中使用，请从下面的字体中选择，然后添加到样式元素： <Text xss=removed>Custom Font</Text> 安卓 正常 Notoserif 无衬线字体 无衬线灯 无衬线薄 无衬线压缩 无衬线媒体 衬线 机械手 等宽 iOS： 旧金山 学院刻LET 书院刻让平原 尼罗河 尼罗河 美国打字机 美式打字机-粗体 美国打字机浓缩 美国打字机浓缩粗体 美国打字机聚光灯 美国打字机灯 苹果色表情符号 苹果SD哥特式Neo 苹果色
React Native入门（十二）之使用第三方字体文件
热门推荐
苦逼的程序猿☺
11-22 1万+
前言项目中需要展示一些别的平面或者其他民族文字时，需要使用该文字对应的字体文件，一般来说都是.ttf的。在React Native中，使用字体文件就是在style中设置fontFamily属性！ 比如，这里的字体文件为：FangSong.ttf，那么使用fontFamily: 'FangSong'后边不要加.ttf后缀！下边来具体说一下，两个平台使用字体文件时具体的操作！Android平台Andr
React Native 添加自定义字体
最新发布
weixin_46086458的博客
07-15 863
本文主要介绍 react native 使用 react-native-asset 添加自定义字体并使用。并列出我在设置自定义字体时遇到的问题，以及解决方案分享。
React Native-05：字体的样式
臧小川的博客
11-09 377
import React from 'react' import { View, Text, Image, StyleSheet } from 'react-native' export default function App () { return ( <View style={styles.container}> <Text style={styles.text}> {/* 设置红色字体 */}
react native 0.70版本使用ant-design-mobile-rn及icons字体图标库
好巧的博客
09-14 4124
示例为全局使用的方式，官方文档的示例是按需引入的，因此全局使用的需要自己去 node_modules/@ant-design/react-native/lib/ 找对应的组件名称。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。android文件夹: android\app\src\main\assets。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
React-Native项目 — 自定义字体的使用
mapbar_front的博客
01-25 1447
在实际的移动端项目开发中，原生安卓和Ios自带的字体，虽然足够工整、耐看、适配大多数的场景。但是在一些特殊场合下，那些规范的字体，可能不太适合我们的app设计，而且，通常情况下，设计师的设计元素里面，本身也包含了一些第三方的特殊字体的使用，这就使得我们的项目中，有足够的能力，支持第三方的字体使用。计算机中，针对全世界的语言符号，进行了一次标准的排序，每一个专门的文字符号，都有对应的一个字符编码，我们汉语也是一样，每一个单独的汉字，都有其特定的编码。
ReactNative屏幕适配工具
08-10
适配工具通常会提供一套解决方案，包括但不限于单位转换、尺寸计算和布局管理。在JavaScript开发中，我们可以使用像素密度独立单位（如dp或dp单位）来设计界面，这样可以确保在不同屏幕尺寸上保持一致的视觉效果。在...
react native android
07-23
React Native提供了一套屏幕适配解决方案，主要通过`Dimensions`和`PixelRatio`这两个API来实现。`Dimensions`用于获取设备的宽度和高度，而`PixelRatio`则用来处理像素密度，帮助开发者在高分辨率屏幕上正确地显示...
reactnative底部导航栏
08-10
`react-navigation`是一个强大的路由和导航解决方案，它为React Native应用程序提供了多种导航方案，包括栈导航、抽屉导航以及我们关注的底部标签导航。 创建一个底部导航栏，首先需要安装`react-navigation`及其...
跨平台的 React native 组件工具箱~.zip
10-10
总的来说，这个“跨平台的 React native 组件工具箱~.zip”为React Native开发者提供了一站式的解决方案，大大提升了开发效率，降低了跨平台应用的开发难度。无论是初创项目还是大型企业应用，都能从中受益。
基于ReactNative实现的iOS和Android的动画TabBar
08-10
这个项目的核心目标是为开发者提供一个跨平台、具有动画效果的TabBar解决方案。 React Native 是JavaScript框架，它允许开发者使用JavaScript和React编写原生移动应用。React的理念是组件化，通过将UI拆分成可重用...
Reactnative字体的样式
weixin_44759289的博客
05-07 861
import React,{Component} from 'react'; import {View,Text,Image,StyleSheet} from 'react-native'; const App=()=>{ return( <View style={styles.container}> <Text style={styles.tex...
react-native 屏幕尺寸和文字大小适配
wngzhem的博客
10-30 2168
转载存档 现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同， 比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。 安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而RN本
native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配
weixin_39744512的博客
12-20 210
import {Platform,Dimensions,PixelRatio} from 'react-native';// iPhoneXconst X_WIDTH = 375;const X_HEIGHT = 812;// screen 屏幕宽度export const SCREEN_WIDTH = Dimensions.get('window').width;// screen 屏幕高度ex...
native字体尺寸自适应 react_ReactNative字体大小不随系统字体大小变化而变化
weixin_39786534的博客
12-20 419
引言在开发react-nativeApp时，相信大家都应该遇到过这样的问题：用户设置了系统的字体大小之后，导致自己的APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？今天这篇文章，...
react native字体大小自适应布局
user95的博客
03-18 3601
需求背景： 最近遇到一个问题，就是在FlatList中显示一行行抄表数据，每行的左侧文本是抄表时间，右侧文本是抄表值。抄表时间是固定格式、固定宽度的 ，但是右侧的抄表值是变长的，从个位数到8、9位数不等，值的结尾还显示单位，所以数据过长时会出现换行或是省略号显示的效果。 产品经理要求是抄表值一行显示不要换行，也不要显示省略号，完整显示。当抄表值过大在布局中显示不下时，则动态缩小字体大小，来适应布局宽度，在一行内完整显示抄表值。 实现效果如下： 下图demo中文本的宽度填充屏幕，点击按钮会动态追加文本。 限制
文字高度大于容器高度解决办法
weixin_43227938的博客
07-09 302
文字高度大于容器高度的解决办法
推荐一款神奇的React Native字体适配库：react-native-responsive-fontsize
gitblog_00053的博客
05-19 386
推荐一款神奇的React Native字体适配库：react-native-responsive-fontsize react-native-responsive-fontSize ???? Responsive fontSize based on screen-size of the device in React-Nati...
React Native 字体大小不随系统字体大小变化
逐梦天下
09-22 2546
在开发react-native App时，相信大家都遇到过这样的问题：用户设置了系统的字体大小之后，导致自己的 App 布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的使用体验。 为什么会出现这种情况呢？其实，我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的。 那么，我们应该如何解决这个问题呢？今天这篇文章，就给大家介绍几种解决方案。
React Native 技术难题与解决方案
以下是一些常见的React Native疑难杂症及其解决方案。 1. **ScrollView问题**： 在React Native中，`ScrollView` 是一个常用的滚动视图组件，它允许用户在内容超出屏幕时进行滚动。在Android和iOS平台上，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Songlcy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值