React Native：每N个字符后换行并正确换行

问题描述

红色文本表示需要的东西和我拥有的东西。 当前，如果后面的单词不合适，则文本仅跳至下一行（面板1）。 但是，我希望将文本换行并切掉，以便通过破坏文本而不是空格来填充字符行（面板2）

如何包装文本而不增加太多空间而跳过？

renderCards() {
  var tempoArray = [];
    for (const n in dbEntries) {
      if (dbEntries[n].eScene.length > 0) {
        var tempRet = this.stringDivider(dbEntries[n].eScene,12);
        tempoArray.push(tempRet);
      }
    }
  return dbEmotionEntries.map((item,index) => {
    return (    
      <View style={[styles.row,{marginTop: 1}]}>
        <ScrollView
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        style={{
          padding: 10,}}>
         <Text
            numberOfLines={6}
            style={[
              styles.garamondDark,{
                fontSize: 15,marginTop: 10,height: 80,width: 130,opacity: 0.7,textAlign: 'justify',//justify,left
                // textAlignLast: 'left',//doesnt work
              },]}>
            {item.eScene}
            {/* {tempoArray[index]} */} //
          </Text>
         </View>
         Other Panels...............
       </ScrollView>

更新：

我正在使用一个函数来操纵字符串；每12个字符添加一行。

stringDivider(str,maxLength) {
  var buff = '';
  var numOfLines = Math.floor(str.length / maxLength); //.round? 
  for (var i = 0; i < numOfLines + 1; i++) {
    buff += str.substr(i * maxLength,maxLength);
      if (i !== numOfLines) {
         if (buff.slice(-1) === ' ') {
            buff += '\n';
         } else {
           buff += '-\n';
         }
      }
   }
   return buff;
 }

当我将text-align设置为“ justify”时，文本仍然没有合理地对齐。

如何让每行在视觉上占据相同的空间？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）