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?

- MEric

---

你尝试过将容器的 flexDirection 明确设置为 column 吗？这对一些人来说似乎有效。 - Sara Inés Calderón

是的，我已经尝试过了，但没有成功 :( 另外，我注意到当文本超出屏幕时，似乎会在文本应该换行的位置创建一个空白行，但该行上没有文本。我还看到过某些短语（如“the cat”）被挤压成屏幕最右侧的“thc”的情况。 - MEric

我也遇到了完全相同的问题——虽然我还没有找到原因，但看起来它最常发生在scrollview / flatlist中，当文本组件不是列表中第一项时。 - Conor Strejcek

是的，这真的很奇怪。我发现当我从竖屏模式切换到横屏模式时，文本并没有消失。有时候通过多次切换模式，它在竖屏模式下实际上可以正确工作。非常奇怪。 - MEric

我找到了我们应用程序中问题的原因。如果iOS上的“文本大小”设置为特定值，则文本开始表现奇怪 - 你能否在github上检查我的问题并尝试是否相关？https://github.com/facebook/react-native/issues/21007 - mxmtsk

Answer 1

根据您的需求，您可以使用以下选项：
- numberOfLines：在计算文本布局（包括换行）后，截断文本并使用省略号，以使总行数不超过此数字。
- adjustsFontSizeToFit：显示所有文本，可能会换行。如果与numberOfLines一起使用，则字体应自动缩小以适应给定的样式约束。
您可以阅读更多信息：这里
示例：
<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>

- Evgeniy Bondarenko