gpt4 book ai didi

ios - React Native iOS 文本有时不换行

转载 作者:可可西里 更新时间:2023-11-01 03:34:48 26 4
gpt4 key购买 nike

我正在开发 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,
}
}

通常,文本会在文本组件的末尾正确环绕。但是,有时结束文本会拖到屏幕的一侧:

enter image description here

当我切换到横向模式时,我通常可以看到被截断的文本,但我很困惑为什么会发生这种情况。我尝试了所有可能的修复方法,尝试使用 flexflexGrowflexShrinkpaddingRightmarginRight,为文本组件和/或 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?

最佳答案

根据你的需要,你可以使用:
- 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>

关于ios - React Native iOS 文本有时不换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51015502/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com