我正在开发 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?
最佳答案
根据你的需要,你可以使用:
- 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/