React Native iOS文本有时无法自动换行。

15 浏览
0 Comments

React Native iOS文本有时无法自动换行。

我正在开发一个React Native应用程序，遇到了一些奇怪的文本换行问题。这个文本换行问题只在某些模拟器（iPhone 6+/7+/8+/X）上发生。基本上，我的应用程序设计如下：

    
          Blah blah blah blah ... Long long long long text
    
    
          Blah blah blah blah ... Long long long long text
    
    
          Blah blah blah blah ... Long long long long text
    
    {/* A bunch more Text components styled similarly as above */}

我的样式定义如下：

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

一般来说，文本组件的文本在结尾处正确换行，但有时结尾的文本会超出屏幕：

\"enter

当我切换到横向模式时，通常可以看到被切掉的文本，但我很困惑为什么会出现这种情况。我已经尝试了许多可能的解决方案，调整了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?

admin 更改状态以发布 2023年5月23日
0

1 答案

0 Comments

根据您的需求，您可以使用以下选项：
- numberOfLines：将文本按照计算文本布局、包括换行的方式截断，并使用省略号来表示截断后的文本，以保证总行数不超过指定的行数。
- adjustsFontSizeToFit：以全部文本的形式显示，可能会加上新行。如果与numberOfLines联用，字体应该会自动缩小以适应给定的样式约束。
您可以了解更多信息：这里。

示例：


Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text


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


Blah blah blah blah ... Long long long long text long text long text long text long text long text long text long text

0