javascript - React Native - bindestrekbruk

Jeg jobber med en React Native-app hvor jeg viser tekst inne i bokser. Noen ganger er de enkelte ordene i boksene for lange til å få plass på én linje, så RN bare bryter ordet når det blir for langt og fortsetter teksten på neste linje. Dette fører dessverre til dårlig stavelsesdeling av ordene (se boksen til venstre i bildet). Jeg prøver å finne en løsning for å forbedre dette slik at resultatet i dette eksemplet ville være som boksen til høyre, der ordet er delt ved en rimelig punkt. Jeg vet at det finnes Javascript-biblioteker som håndterer stavelsesdeling. Dette bryter for eksempel ord inn i deres stavelser i et array. Jeg sitter fast her fordi jeg ikke har noen idé om hvordan jeg faktisk kan finne ut om jeg trenger å dele ordet eller ikke. Noen ideer?

Svar #1

bruk C/C++/Java-koding:

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

Svar #2

Faktisk brukte jeg peni4142s svar til å lage en funksjon som returnerer en streng som kan deles med bindestrek:

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

Nå, hvis din hyphenatedText var i en React Native Text-komponent, ville den automatisk bli strekdelt når den ble brytt.