/**
* Desc: //富文本(表情)控件
*
* Created by WangGanxin on 2018/2/24
* Email: mail@wangganxin.me
*/
import React, {Component,PureComponent} from 'react';
import {
View,
Image,
Text,
StyleSheet,
} from 'react-native';
import {EMOTIONS_DATA} from './DataSource';
import PropTypes from 'prop-types';
let emojiReg = new RegExp('\\/\\{[a-zA-Z_]{1,18}'); //表情符号正则表达式
export default class RichTextWrapper extends Component {
constructor(props){
super(props);
this.state={
Views:[],
};
}
componentWillReceiveProps(nextProps) {
this.state.Views.length=0;
let textContent = nextProps.textContent;
this._matchContentString(textContent);
}
_matchContentString(textContent){
// 匹配得到index并放入数组中
let emojiIndex = textContent.search(emojiReg);
let checkIndexArray = [];
// 若匹配不到,则直接返回一个全文本
if (emojiIndex === -1) {
this.state.Views.push({textContent});
} else {
if (emojiIndex !== -1) {
checkIndexArray.push(emojiIndex);
}
// 取index最小者
let minIndex = Math.min(...checkIndexArray);
// 将0-index部分返回文本
this.state.Views.push({textContent.substring(0, minIndex)});
// 将index部分作分别处理
this._matchEmojiString(textContent.substring(minIndex));
}
}
_matchEmojiString(emojiStr) {
let castStr = emojiStr.match(emojiReg);
let emojiLength = castStr[0].length;
this.state.Views.push();
this._matchContentString(emojiStr.substring(emojiLength));
}
render(){
return (
{this.state.Views}
);
}
}
RichTextWrapper.propTypes = {
textContent:PropTypes.string,
};
const styles = StyleSheet.create({
container: {
flexDirection:'row',
alignItems:'center',
flexWrap:'wrap',
},
subEmojiStyle:{
width:25,
height:25,
}
});