React?Native中Android手機吞字問題如何解決

這篇文章主要介紹“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

譬如作者這臺手機：

就會出現文字顯示不全的問題，即使將 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手機吞字問題如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！