javascript - React Native - bindestreck

Jag arbetar på en React Native-app där jag visar lite text inuti rutor. Ibland är de enskilda orden i rutorna för långa för att rymmas på en rad, så RN delar helt enkelt av ordet när det blir för långt och fortsätter texten på nästa rad. Detta leder tyvärr till dålig bindestreckning av orden (se den vänstra rutan i bilden). Jag försöker hitta en lösning för att förbättra detta så att resultatet i det här exemplet skulle bli som rutan till höger där ordet är korrekt uppdelat med bindestreck. Jag vet att det finns JavaScript-bibliotek som hanterar bindestreckning. Detta delar till exempel upp ord i deras bindestreck i en array. Jag sitter fast här eftersom jag inte har någon aning om hur man faktiskt ska avgöra om man behöver sätta ett bindestreck eller inte. Några idéer?

Svar #1

använd C/C++/Java-kodning:

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

Svar #2

Faktiskt använde jag peni4142:s svar för att skapa en funktion som returnerar en sträng som kan bindestreckas:

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

Nu, om din hyphenatedText skulle vara i en React Native Text-komponent skulle den automatiskt brytas med bindestreck.