如何在 React Native 中处理 Android 手机吞字问题

2024-03-21 21:53| 来源: 网络整理| 查看: 265

React Native App 在部分型号的 Android 手机上，可能会发生文字显示不全的问题。

官方也有一个相关的 Issue，并提供了如下的解决方案：

const defaultFontFamily = { ...Platform.select({ android: { fontFamily: "" }, }), } const oldRender = Text.render Text.render = function (...args) { const origin = oldRender.call(this, ...args) return React.cloneElement(origin, { style: [defaultFontFamily, origin.props.style], }) }

但是升级 React Native 到 0.66 之后，上面这个方法就不起作用了。

复现问题

作者在 React Native 0.67.4 环境下，编写了一个小 demo 来复现这个问题，如下：

function IncompleteText() { return ( 我在左边完整我在右边完整 12345 67890 abcd efgh 今年是 2022 年亏了好多 ¥ ) } const styles = StyleSheet.create({ container: { flex: 1, }, row: { marginTop: 16, marginHorizontal: 24, flexDirection: "row", alignItems: "center", justifyContent: "space-between", height: 60, backgroundColor: "#f5f5f5", }, text: { fontSize: 18, color: "#333333", fontWeight: "normal", // fontFamily: 'DFWaWaSC-W5', backgroundColor: "yellow", }, })

当 Text 中的文本同时符合以下两个条件时，在部分 Android 手机上会出现文字显示不全的问题。

含有半角字符（数字、字母、空格、特殊符号） style 设置了 fontWeight 属性，不管它的值是什么

譬如作者这台手机：

手机型号MIUI 版本Android 版本MI 812.5.210

就会出现文字显示不全的问题，即使将 fontWeight 设置为 bold，也不会有粗体效果。

但是只要 style 设置了 fontFamily，就不会有显示不全的问题，因此，怎样才能正确地设置 fontFamily 呢？

解决问题

stack overflow 上，有人问 How to set default font family in React Native?。

在该问题的讨论列表中，作者找到了适合 React Native 0.66 以上版本的解决方案，如下：

// text-polyfill.ts import React from "react" import { Platform, StyleSheet, Text, TextProps } from "react-native" const defaultFontFamily = { ...Platform.select({ android: { fontFamily: "" }, }), } // @ts-ignore const __render: any = Text.render // @ts-ignore Text.render = function (props: TextProps, ref: React.RefObject) { if (Platform.OS === "ios") { return __render.call(this, props, ref) } const { style, ..._props } = props const _style = StyleSheet.flatten(style) || {} return __render.call( this, { ..._props, style: { ...defaultFontFamily, ..._style } }, ref ) } 示例

这里有一个示例，供你参考。

【本文地址】

公司简介

联系我们