文本在Android中被截断以响应本机

时间:2019-02-18 15:27:40

标签: android reactjs react-native text

我正在开发React native,这是我的新手。我正在尝试显示文本,但是,它显示在文本的android末尾...而未显示完整的文本。它仅在android中发生,在iOS中运行良好。

我写了以下代码

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

有人可以建议我,我在代码中哪里做错了吗?

enter image description here

12 个答案:

答案 0 :(得分:4)

经过长时间的努力,我终于找到了答案。

似乎默认情况下,“文本”将属性 textBreakStrategy 设置为* highQuality *。

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

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

答案 1 :(得分:1)

我遇到了水平剪切文本的问题。 通过使用lineHeight向组件发短信和繁荣,我的问题就解决了

答案 2 :(得分:1)

对于发现提供的解决方案不适合我的情况的任何人 这是我在OnePlus手机上删除文字的解决方案:

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

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

这可能等同于android match_parent设置。 尚未测试它会如何影响iOS,因为我现在还没有这种可能性。

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

如果删除SubreportController subreportController = reportClientDoc.getSubreportController(); for (String string : subreportController.querySubreportNames()) { subreportController.setDataSource(string, dataset); } ,它将正确显示。如果仍然没有显示,则可能是父视图具有固定的高度(或maxHeight)

答案 6 :(得分:0)

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

答案 7 :(得分:0)

您可以通过在末尾添加额外的空间来解决此问题,这不是一个好的解决方法。

推荐:在您的应用程序中包括默认字体系列,并且它在所有设备上均相同

答案 8 :(得分:0)

在我的情况下,在文本组件中添加fontFamily:'arial'可以达到目的。甚至fontFamily:'abc'也可以。我认为只需要设置fontFamily。

答案 9 :(得分:0)

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

我为Text组件样式添加了alignSelf:"stretch",它最终对我有用。如果您想发短信到中间,只需添加textAlign: "center"

希望这对某人有帮助。

答案 10 :(得分:0)

还有其他更好的方法可以解决此问题。但就我而言,添加 46 even 46 30 even 30 82 even 82 90 even 90 56 even 56 17 odd 17 95 odd 95 16 even 16 48 even 48 26 even 26 4 even 4 58 even 58 0 even 0 78 even 78 92 even 92 60 even 60 12 even 12 21 odd 21 63 odd 63 47 odd 47 19 odd 19 41 odd 41 90 even 90 85 odd 85 14 even 14 -9 odd -9 52 even 52 71 odd 71 79 odd 79 16 even 16 80 even 80 51 odd 51 95 odd 6299840 102 even 102 34 even 34 10 even 6299840 79 odd 0 95 odd 95 61 odd 61 92 even 0 89 odd 89 88 even 88 66 even 66 18 even 18 6 even 6 63 odd 63 66 even 66 64 even 64 39 odd 39 5 odd 5 17 17 修复了文本剪切问题和不同设备中的字体对齐问题。

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

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

react-native official docs on custom fonts

答案 11 :(得分:0)

试试这个。

  1. 移除 fontWight : 粗体
  2. 在 Text 标签中添加样式 = width:'100%'(根据您的文字大小)