ReactNative进阶（四十六）：移动端实现字体自适应_allowfontscaling

2401_84616230

于 2024-05-16 01:43:03 发布

阅读量1k

点赞数 16

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616230/article/details/138931384

版权

程序员专栏收录该内容

110 篇文章 0 订阅

订阅专栏

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.1 Text 和 TextInput 组件设置 allowFontScaling = false

<Text allowFontScaling={false}/>
<TextInput allowFontScaling={false}/>

这种方案效率很低，需要在每个使用到这两个组件的地方都加上这个属性，考虑到这两个组件的使用率还是很高的，所以这是一个庞大的工作量，而且在开发过程当中，我们也很容易忘记设置它。

那么有没有更好实现方式呢？当然有，这就是下面讲的第二种：

3.2 自定义 MyText/MyTextInput 组件

可以自定义一个组件MyText, 然后统一设置allowFontScaling = false属性，然后在其他需要调用的时候，直接用MyText代替Text。

MyText.js

import React from 'react'
import {Text} from 'react-native'

export default class MyText extends React.Component {

    render() {
        return (
            <Text
                allowFontScaling={false}
                {...this.props}>
                {this.props.children}
            </Text>
        )
    }
}

这个方案足够好了，但是，你仍然可能在某段代码里，忘记使用MyText而是直接使用Text，这个时候，问题依然会出现。

那么，就没有一种万无一失的方案吗？当然有啦，第三种：

3.3 重写 Text 的 render()

可以重写Text的render()方法，让Text在渲染的时候，设置allowFontScaling = false。这里，需要用到lodash的wrap()方法：

0.56(不包括)版本之前

Text.prototype.render = _.wrap(Text.prototype.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

注意⚠️：
在react-native版本0.56之前，Text是通过React的createReactClass方式创建类的，也就是说，是通过javascript的prototype方式来创建类。所以重写render方法时，需要通过Text.prototype.render来引用。

而在0.56版本，Text改为了es6中extends的实现方式来创建类，所以，需要如下方式来重写render：

0.56(包括)版本之后

Text.render = _.wrap(Text.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

//设置ios字体大小不随系统的字体大小改变
const TextInputRender = TextInput.render;
TextInput.render = function (...args) {
  const originText = TextInputRender.apply(this, args);
  return React.cloneElement(originText, {
    allowFontScaling: Platform.OS === 'android', // 只在iOS平台设置为false
  });
};

const TextRender = Text.render;
Text.render = function (...args) {
  const originText = TextRender.apply(this, args);
  return React.cloneElement(originText, {
    allowFontScaling: Platform.OS === 'android', // 只在iOS平台设置为false
  });
};

大家可以查看源码，或者查看0.56的change-log。

注意⚠️：
这段代码最好放在app整个组件执行调用之前，比如在我的项目中：

import React from 'react'
import {AppRegistry, Text, DeviceEventEmitter, YellowBox} from 'react-native'
import {Provider} from 'react-redux'
import App from './src/App'
import _ from 'lodash'

//字体不随系统字体变化
Text.render = _.wrap(Text.render, function (func, ...args) {
    let originText = func.apply(this, args)
    return React.cloneElement(originText, {allowFontScaling: false})
})

...
...

class MyApp extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
}

AppRegistry.registerComponent("xxx", () => MyApp);

注意⚠️：
但是很遗憾的是，这个只适用于Text，TextInput不能用于此方案。

那么，有没有一种方案，能够同时兼容Text和TextInput并且做到一劳永逸呢？当然有了，终极方案：

3.4 完美方案：修改 defaultProps

首先我们来看各种组件的源码.

TextInput.js

...
  getDefaultProps(): Object {
    return {
      allowFontScaling: true,
      underlineColorAndroid: 'transparent',
    };
  },
...

Text.js

...
  static defaultProps = {
    accessible: true,
    allowFontScaling: true,
    ellipsizeMode: 'tail',
  };
...

通过这两个代码片段可以知道，在定义Text和TextInput时，都有给组件设置默认属性的操作.

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-P3Q4y5T5-1715794960388)]

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84616230

关注

16
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
ReactNative进阶（四十六）：移动端实现字体自适应_allowfontscaling

可以自定义一个组件MyText, 然后统一设置属性，然后在其他需要调用的时候，直接用MyText代替Text。MyText.jsrender() {return (
复制链接

扫一扫