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标簽中的值