Android中React Native的文本被截断

Question

我正在学习React Native，还是个新手。我试图显示文本，但在安卓设备上只显示了部分内容，而不是完整的文本。但在iOS设备上一切正常。

我写了以下代码：

<Text
  numberOfLines={1}
  adjustsFontSizeToFit
  minimumFontScale={0.1}
  style={labelStyle} //labelStyle nothing I have written
></Text>

有人能给我指点一下，我的代码哪里有问题吗？

- Anilkumar iOS - ReactNative

---

请分享一些类似于父视图等的代码。 - Paras Korat

Answer 1

通常当你在使用 fontWeight:bold 且你的安卓设备是一加或者欧珀这样的品牌时（还有其他一些品牌），就会出现这种情况，这是因为你的系统字体与此有冲突。
要解决这个问题，你可以添加其他的fontFamily或在单词之前加上两个空格也可以起作用。
详见：https://github.com/facebook/react-native/issues/15114 编辑 将

- MPN7

---

这真的很有趣。这只发生在我的一加手机上，已经困扰我好几天了。感谢你的指引！ - jschuss

这解决了一加和三星设备的问题。谢谢。 - Gowtham

聪明啊，为什么我没想到空白文本呢？ - Jeff Gu Kang

Answer 2

如果您发现提供的解决方案无法正常工作，就像在我的情况下一样，以下是我解决 OnePlus 手机上文本被剪切的方法:

只需使用以下属性设置组件样式

alignSelf: 'stretch',
textAlign: 'center',

这可能相当于安卓中的match_parent设置。但由于我目前无法测试其对iOS的影响，因此不确定是否适用。

- laszlo

Answer 3

我曾经遇到过文字水平被切断的问题。 通过将lineHeight应用于文本组件，问题迎刃而解。

- Mourad Karoudi

---

谢谢！我完全忘记了lineHeight :) - undefined

Answer 4

经过长时间的努力，我终于解决了它。

看起来，默认情况下，文本将属性textBreakStrategy设置为*highQuality*。

将其更改为*simple*解决了我的问题。

链接在这里：https://reactnative.dev/docs/0.56/text#textbreakstrategy

- Jordan

Answer 5

将 <Text> 元素被截断的 <View> 添加 flex: x 样式，对我来说很有效，当我使用 OnePlus 7T 时。

- Mr Chris

---

flex:1 对我有用。谢谢 - Kshitij

Answer 6

在我的情况下，将fontFamily：'arial'添加到文本组件中就可以了。甚至fontFamily：'abc'也可以工作。我认为只需要设置fontFamily即可。

- ANUJ GUPTA

Answer 7

对我来说，添加额外的空间或将textBreakStrategy设置为“simple”都没有起作用。

我在Text组件样式中添加了alignSelf：“stretch”，最终它对我起了作用。如果你想让文本居中，只需添加textAlign：“center”即可。

希望这能帮助到某些人。

- Priyanka Pakhale

Answer 8

事实证明，由于textBreakStrategy参数的'highQuality'值，我们段落的最后一行被切断了。我们将其更改为'simple'，现在所有内容都能正常显示。显然'highQuality'实际上是低质量的。

- SacWebDeveloper

Answer 9

你可以通过在结尾添加额外的空格来解决它，但这不是一个好的解决方法。

推荐：在你的应用程序中包含默认字体，这样它就可以在所有设备上正常工作。

- Mukhammad Ali

Answer 10

如果您删除numberOfLines，它将正确显示。如果仍然无法显示，则可能是父视图具有固定高度（或最大高度）。

- Mounir Dhahri