React Native - 断字处理

Question

我正在开发一个React Native应用程序，在其中显示一些文本框。有时，文本框中的单词太长，无法放在一行上，因此RN会在单词过长时断开单词并在下一行继续文本。不幸的是，这导致单词的连字化很差（请参见图中的左侧框）。我正在尝试找到解决方案来改善这种情况，使得在这个例子中的结果就像右边的框，单词在合理的位置连字化。我知道有一些处理连字化的javascript库。例如这个将单词分解为连字符数组。我卡在这里，因为我不知道如何确定是否需要连字化单词。有什么想法吗？

- user3346601

---

在“t”和“N”之间添加一个空格。在这里似乎唯一适用的规则是小写字母后面跟着大写字母。查找字符串中所有这些情况，并在大写字母前面添加一个空格。 - Sergiu Paraschiv

那么就没有编程规则可以将它分割成人类所能理解的方式。 - Sergiu Paraschiv

当然有规则——我已经链接到一个JavaScript库，可以将单词分割成连字符形式。我只是不知道该如何使用它。 - user3346601

好的，那可能可行。我只能看到一个大问题。对于“analbum”会发生什么？像这样的解决方案几乎总是有奇怪的边缘情况，你可能无法忽略它们。 - Sergiu Paraschiv

@GarrettMcCullough 那是什么样子？ - shmuli

Answer 1

使用C/C++/Java编码:

text = 'React\u00ADNative'
<Text>{text}</Text>

- peni4142

---

软连字符在iOS上可以使用，但在Android上不行。https://dev59.com/17bna4cB1Zd3GeqPiuNS :( - Sampo

由于在文本组件上设置android_hyphenationFrequency="full"，React Native软连字符在Android上可以正常工作。 - hontas

Answer 2

实际上，我使用了peni4142的答案来创建一个函数，返回一个可以用连字符连接的字符串：

const hyphenatedText = (text: string): string => 
  text
    .split(' ')
    .map((word) => word.split('').join('\u00AD'))
    .join(' ');

现在，如果您的hyphenatedText位于React Native Text组件中，则会自动包装连字符。

- AmerllicA