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]:将本机文本从屏幕上移除,拒绝换行.该怎么办？

Answer 1

根据您的需要，您可以使用：
- numberOfLines：在计算文本布局（包括换行）后用省略号截断文本，以使总行数不超过此数字。
- adjustmentFontSizeToFit：显示所有文本，也许带有新行。如果与 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>