import React, { Component } from 'react';
import {
StyleSheet,
View,
Dimensions,
Text
} from 'react-native';
import { Widget } from 'rn-yunxi';
const { width, height } = Dimensions.get('window');
//模块声名并导出
export default class EmText extends Component {
//默认属性
static defaultProps = {
str: '<em>红酒</em>',
};
//构造函数
constructor(props) {
super(props);
let normalText = [];
let specialText = [];
if (props.str && props.str !== '' && props.str.length > ) {
try {
let tempText = props.str;
tempText = tempText.replace(/<[^>]*>/g, 'tmd')
tempText.trim().split('tmd').forEach((obj, index) => {
if ((index + ) % === ) {
normalText.push(obj)
} else {
specialText.push(obj)
}
})
} catch (e) { }
}
this.state = { //状态机变量声明
normalText,
specialText,
}
}
//渲染
render() {
const { normalText,
specialText, } = this.state
if (normalText && normalText.length > ) {
return (
<Text >
{normalText.map((obj, i) => {
return (<Text>{obj}
<Text style={{ color: 'red' }}>{specialText[i]}</Text>
</Text>)
})}
</Text>
);
}
return (
<Text >{this.props.str}</Text>
);
}
};
使用方法:
<EmText str={'<a>获取后端数据返回Html标签中的值</a>'} />
取到的值就是: 获取后端数据返回Html标签中的值