React Native iOS 文本有时不换行答案

【问题标题】：React Native iOS Text Sometimes Doesn't WrapReact Native iOS 文本有时不换行
【发布时间】：2018-12-03 13:24:28
【问题描述】：

我正在开发一个 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?

【问题讨论】：

您是否尝试将容器的flexDirection 显式设置为column？这似乎对某些人有用。
是的，我试过了，但没有成功:(我注意到的另一件事是，当文本离开屏幕时，文本应该在文本之后创建一个空白行换行到，但行上没有文字。我还看到过某些情况，例如“猫”之类的特定短语会在屏幕最右端被挤压成“thc”。
我也面临着同样的问题——虽然我没有查明原因，但看起来它最常发生在滚动视图/平面列表中，当文本组件不是一部分时列表中的第一项。
是的，这真的很奇怪。我发现当我从纵向模式更改为横向模式时，文本并没有消失。有时通过几次切换模式，它实际上可以在纵向模式下正确运行。真奇怪。
我发现了导致我们应用程序出现问题的原因。如果 iOS 上的“文本大小”设置设置为特定值，则文本开始表现得很奇怪-您可以在 github 上检查我的问题并尝试这是否相关吗？ github.com/facebook/react-native/issues/21007

标签： ios iphone reactjs react-native

【解决方案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>

【讨论】：