React原生iOS文本有时不换行

Question

我正在开发一个React原生应用程序，遇到了一些奇怪的问题，文本没有正确换行。此文本换行问题仅出现在某些模拟器上(iPhone 6 /7 /8 /X)。基本上，我的应用程序设计如下:

<ScrollView
        style={styles.container}
        contentContainerStyle={styles.content}
>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    <Text style={styles.Text} >
          Blah blah blah blah ... Long long long long text
    </Text>
    {/* A bunch more Text components styled similarly as above */}
</ScrollView>

我的风格定义如下:

const styles = StyleSheet.create({
            container: {
                backgroundColor: '#F4F4F4',
            },
            content: {
                paddingRight: 5
            },
            text: {
                marginVertical: 8,
                paddingRight: 10,
                marginLeft: 16,
                fontSize: 18,
                lineHeight: 42,
            }
    }

通常，文本在文本组件的末尾正确换行。但是，有时末尾文本会从屏幕一侧拖尾：

当我切换到横向模式时，我通常可以看到被切掉的文本，但我很困惑为什么会发生这种情况。我已经尝试了很多可能的修复方法，使用flex、flexGrowflexShrink、marginRight，为文本组件和/或contentContainerStyle设置宽度，但似乎没有任何效果。

我还参考了以下所有可能的修复线索:

似乎没有一个修复方法有效。在这一点上，我甚至不知道还可以尝试什么/如何跟踪可能的错误来源。任何指针都将不胜感激！

[2]:https://github.com/facebook/react-native/issues/17960[3]:https://github.com/facebook/react-native/issues/15114[4]:https://github.com/facebook/react-native/issues/7687[5]:https://github.com/facebook/react-native/issues/1438[6]:反应本机文本离开我的屏幕，拒绝换行。怎么办？

Answer 1

根据您的需要，您可以使用:< br> - numberOfLines:在计算完文本布局(包括换行)后用省略号截断文本，以使总行数不超过该数字。< br> - adjustsFontSizeToFit:显示所有文本，可能需要换行。如果使用numberOfLines -字体应该自动缩小，以适应给定的样式约束。< br >您可以在此阅读更多内容

例：