这篇文章主要介绍“React Native中Android手机吞字问题如何解决”，在日常操作中，相信很多人在React Native中Android手机吞字问题如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Native中Android手机吞字问题如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
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 (
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.text}>我在左边 完整</Text>
<Text style={styles.text}>我在右边 完整</Text>
</View>
<View style={styles.row}>
<Text style={styles.text}>12345</Text>
<Text style={styles.text}>67890</Text>
</View>
<View style={styles.row}>
<Text style={styles.text}>abcd</Text>
<Text style={styles.text}>efgh</Text>
</View>
<View style={styles.row}>
<Text style={styles.text}>今年是 2022 年</Text>
<Text style={styles.text}>亏了好多 ¥</Text>
</View>
</View>
)
}
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 手机上会出现文字显示不全的问题。
fontWeight
譬如作者这台手机：
| 手机型号 | MIUI 版本 | Android 版本 |
|---|---|---|
| MI 8 | 12.5.2 | 10 |
就会出现文字显示不全的问题，即使将 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<Text>) {
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
)
}到此，关于“React Native中Android手机吞字问题如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
