html转换react native,React Native HTMLView

最近在开发React Native功能模块时，服务端下发了一个需要显示的HTML标签，经过摸索实验，发现了一个非常好用的第三方组件-HTMLView。HTMLView是一个可以使用HTML内容并将其渲染为Native视图的第三方组件，它具有自定义样式和链接处理等特性。

1. 安装

使用npm包管理工具安装第三方组件库HTMLView。

npm install react-native-htmlview --save

2. 用法

Props：

HtmlView.propTypes = {

addLineBreaks: PropTypes.bool,

bullet: PropTypes.string,

lineBreak: PropTypes.string,

NodeComponent: PropTypes.func,

nodeComponentProps: PropTypes.object,

onError: PropTypes.func,

onLinkPress: PropTypes.func,

onLinkLongPress: PropTypes.func,

paragraphBreak: PropTypes.string,

renderNode: PropTypes.func,

RootComponent: PropTypes.func,

rootComponentProps: PropTypes.object,

style: ViewPropTypes.style,

stylesheet: PropTypes.object,

TextComponent: PropTypes.func,

textComponentProps: PropTypes.object,

value: PropTypes.string,

};

HtmlView.defaultProps = {

addLineBreaks: true,

onLinkPress: url => Linking.openURL(url),

onLinkLongPress: null,

onError: console.error.bind(console),

RootComponent: element => , // eslint-disable-line react/display-name

};

上面这些就是HTMLView所具有的prop，常用如下：

value：要显示的HTML内容字符串

onLindPress：点按HTMLView的链接时会通过url调用这个函数，通过这个属性将会覆盖链接的处理方式(默认调用Linking.openURL(url))。

onLinkLongPress：长按HTMLView的链接时通过url调用这个函数。默认值为null。

stylesheet：一个由标签名称作为键值的样式表对象，它将覆盖应用于相应标签的样式。

3. 例子

import React,{Component} from 'react'

import {StyleSheet} from 'react-native'

import HTMLView from 'react-native-htmlview';

class App extends React.Component {

render() {

var agreeContent = '

请查看隐私条款

';

return (

value={agreeContent}

stylesheet={styles}

onLinkPress={(url) => this._loadWebView(url)}

/>

);

}

_loadWebView(url) {

// 打开url

}

}

const styles = StyleSheet.create({

p:{

fontSize:11,

marginTop:2.5,

marginLeft:5

},

a:{

color:'#FF6700'

}

});

注意：要修改HTMLView组件的内容样式，只能通过stylesheet这个prop。如样例所示通过标签名作为键值的样式表对象去改变THMLView组件的内容样式。

参考