react-native-html-render

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.

Install

npm install react-native-html-render

Futures

Support img and code render.
Can set custom render function and styles.
More beautiful native View.

Demo

Example

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

API

`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']

FAQ

More details see Noder.

Licenses

MIT

osdio/react-native-html-render

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Used by 110

Contributors 3

Languages

Error
Looks like something went wrong!

Packages