osdio / react-native-html-render Goto Github PK

A html render for react-native

JavaScript 99.72% HTML 0.28%

noder react-native react

react-native-html-render's Introduction

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

react-native-html-render's People

Contributors

Stargazers

Watchers

Forkers

mozillo labithiotis kwangkim danielweinmann simplyy philipheinser yukunwu gbaladi xiaohao19910303 ralic azokal mpochron sponk-pl adamivancza flyskywhy kzhiquan reactandnative nobalmohan fanfani4 ariona chansila bahadircivelek dioxide yinhaha eric-love 0nlyoung7 temacucar the-factory woshijason bharatefb ashishk9670 jayesh-kumar-yadav jatulcodes shubhankarb2 codewithgulam 777-hello callmebaibhav sourabh18102002 akshar-wd raj980 pranavstar-1203 jacksaluza bijantitan satyamgta agam-coder devildeep4u dps0340

react-native-html-render's Issues

Unable to resolve module Dimensions.

Hello, I've installed react-native-html-render "1.0.2".
When I run project I am getting:
Unable to resolve module Dimensions from /Users/r0st1k/SWAN/react-app/node_modules/react-native-html-render/lib/htmlRender.js: Invalid directory /Users/node_modules/Dimensions

When I've installed dimensions module through npm I get the same message.

I know this is not a right way to do, but when I've corrected
var Dimensions = require('Dimensions') to var Dimensions = require('dimensions') in htmlRender.js it finds dimensions but gives me next error:
Unable to resolve module fs from /Users/r0st1k/SWAN/react-app/node_modules/dimensions/index.js: Invalid directory /Users/node_modules/fs

Please advise what to do to use your module.

Now using node v5.2.0 (npm v3.5.1)

Feature Request: Add support for 'textAlign'

I noticed we cannot use textAlign in styles since you are nesting <Text /> containers (https://facebook.github.io/react-native/docs/text.html#containers).

Would be nice if we could add support for this. Maybe with a <Text style={styles[node.name+'Align']}> class name (ie. pAlign)?

Thanks.

image link not render

<a>
<img></img>
</a>

Line break inside paragraph should not be taken into account

Basically,

<p>This is something
nice</p>

should render as: This is something nice.

instead of:

This is something
nice

Right now, the line break inside the paragraph is being taken into account, which is not valid.

/r/n Not right displayed!

My json include \r symbol. With him a half of the text isn't displayed. Without him all of norms.In what there can be a problem.

不支持android环境吗

这个只能用在ios吗

Image will not be shown if there is an outer `figure` block.

I have data like this:

"<p>又更新了一点代码，下面是新的预览图：</p>
<img src="https://dn-python.qbox.me/images/4b9/56d18e93-rKvyC.png" alt="Python China ReactNative App" />
<figure><img src="https://dn-python.qbox.me/images/4b9/56d2754a-q9Q5a.png" alt="Python China ReactNative App" /></figure>
"

The first image renders nice, but the second one will disappear. I'm using the styles nearly the same as noder-react-native.

Confused by example!

Head lines of example here:

var React = require('react-native')

var HtmlRender = require('react-native-html-render')

var window = require('../../util/window')
var routes = require('../../configs/routes')

What's '../../configs/routes' and '../../util/window'? Should I install them before using this Render?

<HtmlRender value={'<div>'+str+'</div>'} stylesheet={
                    {
                    p:{
                    margin:0,
                    padding:0,
                    fontSize:14,
                    lineHeight:16}
                    }}/>

What license are you offering for this project?

Here's some info about licenses on GitHub if you need it.

https://help.github.com/articles/open-source-licensing/#where-does-the-license-live-on-my-repository

Suggestion:

https://opensource.org/licenses/MIT

Really cool project, BTW.

super expression must either be null or a function not undefined

在npm install 后，在require 的时候会报 super expression must either be null or a function not undefined 错误！