React?Native中Android手機(jī)吞字問題如何解決

這篇文章主要介紹“React Native中Android手機(jī)吞字問題如何解決”，在日常操作中，相信很多人在React Native中Android手機(jī)吞字問題如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React Native中Android手機(jī)吞字問題如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

React Native App 在部分型號的 Android 手機(jī)上，可能會發(fā)生文字顯示不全的問題。

官方也有一個 相關(guān)的 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 之后，上面這個方法就不起作用了。

復(fù)現(xiàn)問題

作者在 React Native 0.67.4 環(huán)境下，編寫了一個小 demo 來復(fù)現(xiàn)這個問題，如下：

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",
  },
})

當(dāng) Text 中的文本同時符合以下兩個條件時，在部分 Android 手機(jī)上會出現(xiàn)文字顯示不全的問題。

fontWeight

譬如作者這臺手機(jī)：

就會出現(xiàn)文字顯示不全的問題，即使將 fontWeight 設(shè)置為 bold ，也不會有粗體效果。

但是只要 style 設(shè)置了 fontFamily ，就不會有顯示不全的問題，因此，怎樣才能正確地設(shè)置 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
  )
}

到此，關(guān)于“React Native中Android手機(jī)吞字問題如何解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>