h5 点评 需要支持 emoji 表情(自己网站上找了一些表情包)

emojiList.js

const emoji = [
  '😀',
  '😁',
  '😂',
  '😄',
  '😅',
  '😆',
  '😇',
  '😉',
  '😊',
  '🙂',
  '🙃',
  '🤣',
  '😗',
  '😍',
  '😘',
  '😙',
  '😚',
  '🤩',
  '🥰',
  '😋',
  '😛',
  '😜',
  '😝',
  '🤑',
  '🤪',
  '🤗',
  '🤭',
  '🤠',
  '😽',
  '💕',
  '💖',
  '👍',
];
export const emojiList = emoji.map((item, index) => ({
  id: `emoji_${index + 1}item`,
  emoji: item,
}));
// 大数组切成长度为 n的几个小数组,方便 样式书写
const sliceArray = (array, subGroupLength) => {
  let index = 0;
  let newArray = [];
  while (index < array.length) {
    newArray.push(array.slice(index, (index += subGroupLength)));
  }
  return newArray;
};

export const newEmojiList = sliceArray(emojiList, 8);

index.jsx  和处理表情的方法。//表情展示

{showEmojiBox && (
            <View
              style={{ padding: '18px', backgroundColor: '#f9f9f9' }}
              className="emoji-container"
            >
              {newEmojiList.map((item, index) => (
                <div key={index} className="emoji-div-container">
                  {item.map(emojiItem => (
                    <div
                      key={emojiItem.id}
                      className="emoji-div"
                      onClick={() => handleClickEmoji(emojiItem)}
                    >
                      {emojiItem.emoji}
                    </div>
                  ))}
                </div>
              ))}
            </View>
          )}


//  把表情符号换成表情id保存,用来传给后端
  const handleContentEmoji = (content = '') => {
    let newContent = content;
    for (let i = 0; i < emojiList.length; i++) {
      if ((content || '').indexOf(emojiList[i].emoji) > -1) {
        newContent = newContent.replace(
          new RegExp(emojiList[i].emoji, 'g'),
          emojiList[i].id,
        );
      }
    }
    return newContent;
  };
 
 
// 把表情id换成表情符号放到列表里
  const handleContentEmoji = (content = '') => {
    let newContent = content;
    for (let i = 0; i < emojiList.length; i++) {
      if ((content || '').indexOf(emojiList[i].id) > -1) {
        newContent = newContent.replace(
          new RegExp(emojiList[i].id, 'g'),
          emojiList[i].emoji,
        );
      }
    }
    return newContent;
  };


posted @ 2022-11-18 16:56  飞奔的程序员  阅读(333)  评论(0)    收藏  举报