文本在 android 中被截断以响应本机答案

【问题标题】：Text is getting cut off in android for react native文本在 android 中被截断以响应本机
【发布时间】：2019-07-12 00:39:33
【问题描述】：

我正在研究 React Native，我是新手。我正在尝试显示文本，但是，它显示在文本的 android 结尾......而不是显示完整的文本。它只发生在 android 中，在 iOS 中运行良好。

我写了以下代码

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

谁能建议我，我在代码中哪里做错了？

【问题讨论】：

请分享更多代码，如父视图等。

标签： android reactjs react-native text

【解决方案1】：

我只是添加了填充，问题就解决了

如果文本从左侧截断，只需添加paddingLeft:10

在我的情况下，当我增加字体大小时，文本从顶部被截断，所以我添加了paddingTop:20

如果文本从顶部截断添加textAlignVertical: 'bottom'

【讨论】：

【解决方案2】：

这通常发生在您有以下情况时：fontWeight:bold 并且您的 android 设备是例如 Oneplus 或 Oppo（还有一些其他品牌），这与您的系统字体冲突。
要解决此问题，您可以添加一些其他 fontFamily 或在单词前面放置 2 个空格似乎也可以。
见：https://github.com/facebook/react-native/issues/15114

编辑

在 Text 元素上将 textBreakStrategy 设置为 simple 似乎也适用于三星 Galaxy s10、Google Pixel 等某些设备

【讨论】：

这真的很有趣。它只发生在我的一加身上，并且困扰了我好几天。谢谢指点！
这解决了 OnePlus 和三星设备的问题。谢谢。
聪明。为什么我不考虑空白文本？

【解决方案3】：

试试这个。

删除 fontWight : 粗体
在 Text 标签中添加这样的样式 = width:'100%'（根据您的文本大小）

【讨论】：

【解决方案4】：

在使用 OnePlus 7T 时，将 <View> 周围的 <Text> 元素添加到 flex: x 样式对我很有效。

【讨论】：

flex:1 为我工作。谢谢

【解决方案5】：

还有其他更好的方法可以解决此问题。但在我的情况下，添加 custom font 修复了不同设备中的文本剪切问题和字体对齐。

添加自定义字体可以轻松解决问题。

如何添加自定义字体 = checkout this StackOverflow answer

react-native official docs on custom fonts

【讨论】：

【解决方案6】：

添加额外空间或将 textBreakStrategy 添加为“简单”对我不起作用。

我为 Text 组件样式添加了alignSelf:"stretch"，它最终对我有用。如果您想将文本放在中心，只需添加 textAlign: "center" 即可。

希望这对某人有所帮助。

【讨论】：

【解决方案7】：

在我的例子中，将 fontFamily: 'arial' 添加到文本组件就可以了。甚至 fontFamily: 'abc' 也可以。我认为它只需要设置 fontFamily。

【讨论】：

【解决方案8】：

苦苦挣扎了很久，终于搞明白了。

似乎默认情况下，Text 将属性 textBreakStrategy 设置为 * highQuality*。

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

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

【讨论】：

【解决方案9】：

您可以通过在末尾添加额外空间来修复它，这不是一个好的解决方法。

推荐：在您的应用程序中包含默认字体系列，它适用于所有设备

【讨论】：

【解决方案10】：

对于那些发现提供的解决方案不像我的情况那样工作的人这是我在 OnePlus 手机上剪切文本的解决方案：

只需使用这些属性设置组件样式

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

这可能相当于 android match_parent 设置。没有测试它将如何影响 iOS，因为我现在没有这种可能性。

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

我遇到了水平剪切文本的问题。通过使用lineHeight 文本组件和繁荣，我的问题解决了

【讨论】：

【解决方案13】：

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

【讨论】：