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

标签 ios iphone reactjs react-native

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

相关文章:

iphone - ASIHttprequest 用于登录认证

javascript - ReactJS:React.render 不是函数,React.createElement 也不是函数

iphone - iPhone应用程序可以有时间限制吗?

ios - 使用唯一键的 NSKeyed 归档器警告

iphone - 使用函数后的 EXC_BAD_ACCESS

iphone - 无法从字符串转换日期

iphone - UITableViewCell 圆角和剪辑 subview

ios - 如何设置状态栏白色 ios 7.1?

reactjs - react : how to remount a sibling component to re-run componentDidMount?

javascript - ReduxForm - enableReinitialize 不更新嵌套 FieldArrays 中的值