javascript - React Native - hifenização


Estou a trabalhar numa aplicação React Native onde mostro algum texto dentro de caixas. Por vezes, as palavras individuais nas caixas são demasiado longas para caber numa linha, por isso o RN simplesmente corta a palavra quando ela ficaria demasiado longa e continua o texto na linha seguinte. Infelizmente, isto leva a uma má divisão silábica das palavras (veja a caixa à esquerda na imagem). Estou a tentar encontrar uma solução para melhorar isto, de forma que, neste exemplo, o resultado seja como a caixa à direita, onde a palavra é dividida em sílabas num ponto razoável. Sei que existem bibliotecas javascript que lidam com divisão de palavras. Esta, por exemplo, divide as palavras nas suas sílabas numa array. Estou preso aqui porque não faço a minima ideia de como realmente descobrir se preciso de dividir a palavra em sílabas ou não. Alguma ideia?

Resposta #1

usar codificação C/C++/Java:

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

Resposta #2

Na verdade, eu usei a resposta de peni4142 para criar uma função que devolve uma string que pode ser hifenizada:

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

Agora, se o seu hyphenatedText estivesse num componente Text do React Native, ele seria automaticamente quebrado com hífen.