A html render for react-native
A html render for react-native. But don't Suitable for all html. Only Suitable for the html generator by markdown with minify.
Now it used by Noder.
Be careful to use, the performance is not good. If you want to improve the performance, be free to open a issue or send a PR.
npm install react-native-html-render
var React = require('react-native')
var HtmlRender = require('react-native-html-render')
var {
Component,
View,
Text,
StyleSheet,
Image
}=React
var styles = StyleSheet.create({
img: {
width: 100,
height: 100
}
})
class HtmlContent extends Component {
_renderNode(node, index, parent, type) {
//Your code here
}
render() {
const sample = "<H5>Hello World</H5>";
return (
<HtmlRender
value={{sample}}
stylesheet={styles}
renderNode={this._renderNode}
/>
)
}
}
module.exports = HtmlContent
value
The value of html content.
stylesheet
Custom styles
onLinkPress
Handle the link click event.
renderNode
Custom render function.
The render function has three arguments.
node: A Object show the node of html.
Struct:
{
name:'text',
text: String,
parent: Object,
type: String
}
or If the node is not a text node:
{
name: String,
attribs: Object,
type: String,
parent: Object
}
index: The index of the node in the parent node.
parent: The parent of the node.
type: Only two types: block
or inline
.
Mor details:
var blockTagArr = ['div', 'p', 'img', 'address',
'blockquote', 'dir', 'dl',
'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'menu', 'ol', 'pre', 'table', 'ul', 'li', 'hr']
var inlineTagArr = ['a', 'abbr', 'b', 'big',
'br', 'cite', 'code', 'em', 'label', 'span', 'strong']
More details see Noder.