【公众号搬运】React-Native开发鸿蒙NEXT(8)

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

React-Native开发鸿蒙NEXT(8)

原创 悬空八只脚 悬空八只脚 2024年09月30日 21:37 江苏

　　主体开发完了也上架了，现在就剩下社区RN了。多个RN的切换加载需要额外处理。单个RN是用RNApp来加载的，多个的话得改成RNSurface来加载。demo里是有多bundle的加载实现的，后面再研究。

　　先把APP首页的社区列表做出来。当初开发的时候列表是单独做的，没有用社区RN的组件。也是为了加快开发进度，复制过去改改路径就完事了。往往屎山就是这么造出来的。这次还是保留原样，后面的RN社区部分工作量感觉不小，就不再这上面花功夫了。还有个原因就是这经费问题迟迟不到位，用爱发电难免影响点积极性。虽说是列表，其实也把一整套处理富文本的逻辑都搬过去了，只是没用上多少，因为列表只是展示个文章的标题和缩略图，正文是不展示的。倒也不是白下力气，这部分后面去处理社区RN的改造是可以复用的。社区RN当年做的时候就是照着头条抄的，复杂点的地方在于富文本的排版处理。发帖有@人和#话题两个基本功能，需要针对@与#标签来识别。现在回过头来看当年写的处理逻辑真是头皮发麻。这要是不是屎山那就天下无屎了。

js

复制代码



const renderRowText = (rowItem, index) => {
  // console.log('rowItem = '+ rowItem);
  /* 以10个字符作为最大长度的限制（测试），如果超过了10个字符，显示"...全文"，裁剪是先取加下一个内容的长度再判断的，可能会比手动计算
     的短一点，可以判断下一个内容是不是纯文本，如果是纯文本还是可以截字的，但@#【图片】是不能截取的必须全部显示
   */
  // 内容计算
  let _kMaxLength = kMaxLength;
  // 是否需要行数控制 true 清除行数控制 ,false ：不清除行数控制
  let _kClearNumberOfLine = props.clearNumberOfLine;
  let content = currentLength;
  // 输出的控件数组
  let textArr = [];
  if (rowItem.length == 0) {
    textArr.push(<Text></Text>);
    return textArr;
  }
  // 字号
  let _kFontSize = kFontSize;
  // 已读颜色
  let kReadColor = '#999';
  // 未读颜色
  //let kUnReadColor = "rgba(0,0,0,0.85)";
  let kUnReadColor = textColor;
  // "查看原图"颜色
  let kImgColor = '#406599';
  // @和#颜色
  let kAtAndTopicColor = '#406599';
  // 行高
  let kLineHeight = scaleHeight(24);
  // 是否已读
  let kHasBeenRead = !!!props.hasBeenRead ? false : props.hasBeenRead;
  //data = "↵funew↵&lt;a class=&quot;#&quot; href= &quot;id = 1066929428594036736&quot; title = &quot;#今天吃什么#&quot;/&gt;↵funew↵泉屋↵funew↵&lt;a class=&quot;#&quot; href= &quot;id = 1066929428594036736&quot; title = &quot;#今天吃什么#&quot;/&gt;↵funew↵"
  // let isOver = false;
  // 富文本区切数组
  let spliteArr = [];
  // 分割字符串
  spliteArr = Array.from(rowItem);
  // 当存在回车换行的时候，如果一行计算的字数< 最大字数/最多行数，将统计数字撑满
  if (linesArr.length > 0 && index > 0) {
    if (
      currentLength < kMaxLineLength * index &&
      currentLength < kMaxLength
    ) {
      currentLength = kMaxLineLength * index;
      console.log('有回车，撑满一行:' + currentLength);
    }
  }
  // 数组处理
  spliteArr.map((item, index1) => {
    //content += item;
    // 如果想要替换所有指定的字符串，可以用while循环
    while (item.indexOf('&nbsp;') >= 0) {
      item = item.replace('&nbsp;', ' ');
    }
    if (
      content >= kMaxLength &&
      (!!!_kClearNumberOfLine || !_kClearNumberOfLine)
    ) {
      console.log('达到最大长度，不再处理22222');
      isOver = true;
      // 发送超长通知给调用页面以便做UI处理
      DeviceEventEmitter.emit('RichTextContentIsOver');
      if (!isOver1 && !hideShowAllText) {
        setIsOver1(true);
      }
      return;
    } else {
      // 过滤掉空值<统一不过滤，换行后的空行需要显示>
      // if(item.trim().length != 0){
      if (1 == 1) {
        // 判定是不是标签
        if (item.indexOf('<') != -1) {
          // 标签
          // 套入<div>中
          if (item.indexOf('<div') != 0) {
            item = '<div>' + item;
            item = item + '</div>';
          }
          // item = "<div>" + item;
          // item = item + "</div>";
          // 解析
          let $ = Cheerio.load(item);
          // 获得富文本中设定的字号
          let style = $('span').attr('style');
          if (!!style) {
            let arr = style.split(';');
            for (let attr of arr) {
              if (attr.indexOf('font-size') != -1) {
                let size = attr
                  .replace('font-size:', '')
                  .replace('px', '')
                  .trim();
                let int_size = parseInt(size);
                if (!!int_size) {
                  kFontSize = int_size;
                  _kFontSize = int_size;
                }
              }
            }
          }
          if (!enabledHideImg) {
            let markArr = $('div').find('a');
            renderHerfImage(
              markArr,
              textArr,
              content,
              kMaxLength,
              kClearNumberOfLine,
              kImgColor,
              kFontSize,
              kAtAndTopicColor,
              index1,
              $,
            );
            let imageArr = $('div').find('img');
            renderHerfImage(
              imageArr,
              textArr,
              content,
              kMaxLength,
              kClearNumberOfLine,
              kImgColor,
              kFontSize,
              kAtAndTopicColor,
              index1,
              $,
            );
          }
          /* 这段逻辑是为了处理之前因为标签的结尾">"后面没有跟上区切字符，导致的可能出现">"还有纯文本的情况，现在已经添
             加了结束标签的区切字符，这里保留以兼容以前的老数据
          */
          // 过滤掉a标签与标签之间的内容，Cheerio的text方法会包含child元素的text一起输出
          let removedAItem = item.replace(/<a.*?>(.*?)</a>/g, '');
          // 删除多余不必要的div嵌套,Cheerio的text方法会包含child元素的text一起输出,存在多个div会重复输出,如<div><div><div>23423423424</div></div></div>,数字会输出两遍
          // removedAItem = removedAItem.replace(/<div.*?>(.*?)</div>/g,"");
          // let $1 = Cheerio.load(removedAItem);
          // let markAText = $1("div").text();
          removedAItem = item.replace(/<[^>]+>/g, '');
          let markAText = removedAItem;
          // let markAText = removedAItem;
          if (!_.isEmpty(markAText)) {
            // 文本
            var tempContent = content;
            content += markAText.length;
            // 超长判断
            if (
              content > kMaxLength &&
              (!!!_kClearNumberOfLine || !_kClearNumberOfLine)
            ) {
              // 超长
              if (!isOver) {
                // 文本可以尝试截位
                if (tempContent < kMaxLength) {
                  markAText = markAText
                    .toString()
                    .substring(0, kMaxLength - tempContent);
                  textArr.push(
                    <Text
                      key={index1 + '-index1-'}
                      style={
                        /*kHasBeenRead
                                              ? {
                                                  color: kReadColor,
                                                  fontSize: kFontSize,
                                                  lineHeight: lineHeight,
                                                  //height: kLineHeight
                                                  //backgroundColor: 'green',
                                              }
                                              : {
                                                  color: kUnReadColor,
                                                  fontSize: kFontSize,
                                                  lineHeight: lineHeight,
                                                  //height: kLineHeight
                                                  //backgroundColor: 'green',
                                              }*/
                        getReadTextStyle(
                          lineHeight,
                          kReadColor,
                          kUnReadColor,
                          kFontSize,
                          kHasBeenRead,
                        )
                      }>
                      {markAText}
                    </Text>,
                  );
                }
              }
              isOver = true;
              // 发送超长通知给调用页面以便做UI处理
              DeviceEventEmitter.emit('RichTextContentIsOver');
              // FIXME:这里不需要？？？
              if (!isOver1 && !hideShowAllText) {
                setIsOver1(true);
              }
              return;
            } else {
              // 正常显示
              textArr.push(
                <Text
                  key={index1 + '-index1-'}
                  style={getReadTextStyle(
                    lineHeight,
                    kReadColor,
                    kUnReadColor,
                    kFontSize,
                    kHasBeenRead,
                  )}
                  onLongPress={() => {
                    copy();
                  }}
                  suppressHighlighting={true}>
                  {markAText}
                </Text>,
              );
              // 拼接到文本字符串中
              textString = textString + markAText;
            }
          }
          // }
        } else {
          // 纯文本
          var tempContent = content;
          content += item.length;
          // 超长判断
          if (
            content > kMaxLength &&
            (!!!_kClearNumberOfLine || !_kClearNumberOfLine)
          ) {
            // 超长
            //if(!isOver){
            if (1 == 1) {
              // 文本可以尝试截位
              if (tempContent < kMaxLength) {
                item = item.toString().substring(0, kMaxLength - tempContent);
                textArr.push(
                  <Text
                    key={index1 + '-index1-'}
                    style={getReadTextStyle(
                      lineHeight,
                      kReadColor,
                      kUnReadColor,
                      kFontSize,
                      kHasBeenRead,
                    )}>
                    {item}
                  </Text>,
                );
              }
              // textArr.push(<Text>
              //     <Text style={{
              //         color: kDotColor,
              //         fontSize: kFontSize,
              //         //height: kLineHeight
              //     }}>...</Text>
              //     <Text style={{
              //         color: kZenbuColor,
              //         fontSize: kFontSize,
              //         //height: kLineHeight
              //     }}>全文</Text>
              // </Text>);
            }
            isOver = true;
            // 发送超长通知给调用页面以便做UI处理
            DeviceEventEmitter.emit('RichTextContentIsOver');
            if (!isOver1 && !hideShowAllText) {
              setIsOver1(true);
            }
            return;
          } else {
            // 正常显示
            textArr.push(
              <Text
                key={index1 + '-index1-'}
                style={getReadTextStyle(
                  lineHeight,
                  kReadColor,
                  kUnReadColor,
                  kFontSize,
                  kHasBeenRead,
                )}
                onLongPress={() => {
                  copy();
                }}
                suppressHighlighting={true}>
                {item}
              </Text>,
            );
            // 拼接到文本字符串中
            textString = textString + item;
          }
        }
      }
    }
  });
  // console.log(textArr);
  currentLength += content;
  return textArr;
};

　　话说回来：当年也是想做个好人的。时间紧任务重，屎山的出现自有它的无奈。

js

复制代码



// 处理文本
const _dealWithText = (item, currentLength) => {};
// 处理<a>标签
const _dealWithATag = item => {};
// 创建一个用于显示纯文本的Text组件
const _createTextObjectForString = item => {};
// 创建一个用于显示<a>标签内容(@,#,[图片])的Text组件
const _createTextObjectForTag = item => {};

// 创建一个用于显示"...全文"的Text组件
const _createTextObjectForZenbu = item => {};

　　也许，把社区RN开发完，若还是这样吊儿郎当闲着就回过头来把这个富文本的组件好好改改，就当重新学习了。

　　十一长假也没什么计划，感觉就这样吧。这几天啥疯掉的股市和自己也没什么关系，整个一无欲无求？继续开发下去吧，总得通过项目来保持下学习的状态。虽然目前看学习并不能带来什么短期收益和机会。但目标总是要有的，哪怕仅仅是为了一杯冰美式：）

---

关注该公众号【悬空八只脚】