React Native Text组件单词换行拆分：iOS端如何避免及字号适配？

一、避免单词被拆分换行 #

UIKit 实现 #

针对UILabel，通过以下配置禁止单词拆分：

• 关闭自动连字符功能，避免系统将长单词拆分换行：

  label.hyphenationFactor = 0
  

• 设置换行模式为按单词边界换行，确保完整单词移至下一行：

  label.lineBreakMode = .byWordWrapping
  

SwiftUI 实现 #

使用Text的修饰符关闭连字符即可：

Text("transforming")
    .hyphenation(.never)

二、自动缩小字号让单词完整显示在一行 #

如果希望长单词不换行，而是自动缩小字号适配一行宽度，可按以下配置：

UIKit 实现 #

给UILabel开启自动缩字号功能，并限制最小缩放比例：

label.adjustsFontSizeToFitWidth = true
// 设置最小字号为原字号的50%，可根据需求调整
label.minimumScaleFactor = 0.5
// 配合之前的禁止拆分配置，确保先尝试不拆分，再缩字号
label.hyphenationFactor = 0
label.lineBreakMode = .byWordWrapping

SwiftUI 实现 #

通过minimumScaleFactor和scaledToFit修饰符实现动态缩字号：

Text("transforming")
    .hyphenation(.never)
    .minimumScaleFactor(0.5)
    .scaledToFit()

补充方案：横向滚动显示 #

如果不希望缩小字号，也可以用横向滚动容器让长单词完整显示：

UIKit #

将UILabel放入UIScrollView，并设置scrollView.isScrollEnabled = true，scrollView.showsHorizontalScrollIndicator = false（可选）。

SwiftUI #

用横向滚动容器包裹文本：

ScrollView(.horizontal, showsIndicators: false) {
    Text("transforming")
        .hyphenation(.never)
}

内容的提问来源于stack exchange，提问作者Nikit