React Native iOS文本有时不会自动换行

Question

我正在使用React Native应用程序，遇到了一些奇怪的问题，文本没有适当地换行。此自动换行问题仅在某些模拟器（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，flexGrow，flexShrink，paddingRight，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]：React native text going off my screen, refusing to wrap. What to do?

Answer 1

根据需要，可以使用：
-numberOfLines：在计算文本布局（包括换行）之后，用省略号截断文本，以使总行数不超过此数字。
 -AdjustsFontSizeToFit：显示所有文本，也许用换行符显示。如果与numberOfLines一起使用-字体应自动缩小以适应给定的样式限制。
您可以阅读更多内容：here

示例：
<ScrollView> <Text adjustsFontSizeToFit={true}> Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text </Text> <Text numberOfLines={1} > Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text long text </Text> <Text numberOfLines={1} adjustsFontSizeToFit={true}> Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text </Text> </ScrollView>