Merge pull request #7 from catalinmiron/7-add-react-native-htmlview-package
Add react-native-htmlview package
This commit is contained in:
commit
2155ee985a
|
@ -14,7 +14,7 @@ var {
|
|||
|
||||
var Icon = require('FontAwesome'),
|
||||
getImage = require('./helpers/getImage'),
|
||||
HTML = require('./vendor/HTML'),
|
||||
HTML = require('react-native-htmlview'),
|
||||
screen = require('Dimensions').get('window'),
|
||||
ParallaxView = require('react-native-parallax-view'),
|
||||
Modal = require('react-native-modal');
|
||||
|
@ -76,7 +76,8 @@ var ShotDetails = React.createClass({
|
|||
</View>
|
||||
<View style={styles.separator} />
|
||||
<Text>
|
||||
<HTML value={this.props.shot.description}/>
|
||||
<HTML value={this.props.shot.description}
|
||||
stylesheet={styles}/>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
@ -125,6 +126,10 @@ var ShotDetails = React.createClass({
|
|||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
a: {
|
||||
fontWeight: '300',
|
||||
color: '#ea4c89'
|
||||
},
|
||||
invisibleView: {
|
||||
flex: 1,
|
||||
position: 'absolute',
|
||||
|
|
|
@ -1,105 +0,0 @@
|
|||
var React = require('react-native')
|
||||
var {
|
||||
View,
|
||||
Text,
|
||||
LinkingIOS,
|
||||
StyleSheet,
|
||||
} = React
|
||||
|
||||
// you might want to compile these two as standalone umd bundles
|
||||
// using `browserify --standalone` and `derequire`
|
||||
// until this issue is fixed: https://github.com/facebook/react-native/issues/231
|
||||
// and then just require the umd bundle files directly
|
||||
var htmlparser = require('./htmlparser2.js');
|
||||
var entities = require('./entities.js');
|
||||
|
||||
function htmlToElement(rawHtml, done) {
|
||||
var handler = new htmlparser.DomHandler(function (err, dom) {
|
||||
if (err) done(err)
|
||||
done(null, domToElement(dom))
|
||||
})
|
||||
var parser = new htmlparser.Parser(handler)
|
||||
parser.write(rawHtml)
|
||||
parser.done()
|
||||
}
|
||||
|
||||
var PARAGRAPH_BREAK = '\n\n'
|
||||
|
||||
function domToElement(dom, parent) {
|
||||
if (!dom) return null
|
||||
|
||||
return dom.map((node, index, list) => {
|
||||
if (node.type == 'text') {
|
||||
return (
|
||||
<Text key={index} style={parent ? styles[parent.name] : null}>
|
||||
{entities.decodeHTML(node.data)}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
if (node.type == 'tag') {
|
||||
var touchHandler = null
|
||||
if (node.name == 'a' && node.attribs && node.attribs.href) {
|
||||
touchHandler = () => LinkingIOS.openURL(entities.decodeHTML(node.attribs.href))
|
||||
}
|
||||
|
||||
return (
|
||||
<Text key={index} onPress={touchHandler}>
|
||||
{domToElement(node.children, node)}
|
||||
{node.name == 'p' && index < list.length-1 ? PARAGRAPH_BREAK : null}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var boldStyle = {fontWeight: '500'}
|
||||
var italicStyle = {fontStyle: 'italic'}
|
||||
var codeStyle = {fontFamily: 'Menlo'}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
b: boldStyle,
|
||||
strong: boldStyle,
|
||||
i: italicStyle,
|
||||
em: italicStyle,
|
||||
pre: codeStyle,
|
||||
code: codeStyle,
|
||||
a: {
|
||||
fontWeight: '500',
|
||||
color: '#007AFF',
|
||||
},
|
||||
})
|
||||
|
||||
var HTML = React.createClass({
|
||||
mixins: [React.addons.PureRenderMixin],
|
||||
getInitialState() {
|
||||
return {element: null}
|
||||
},
|
||||
componentWillReceiveProps() {
|
||||
if (this.state.element) return
|
||||
this.startHtmlRender()
|
||||
},
|
||||
componentDidMount() {
|
||||
this.startHtmlRender()
|
||||
},
|
||||
startHtmlRender() {
|
||||
if (!this.props.value) return
|
||||
if (this.renderingHtml) return
|
||||
|
||||
this.renderingHtml = true
|
||||
htmlToElement(this.props.value, (err, element) => {
|
||||
this.renderingHtml = false
|
||||
|
||||
if (err) return console.error(err)
|
||||
|
||||
if (this.isMounted()) this.setState({element})
|
||||
})
|
||||
},
|
||||
render() {
|
||||
if (this.state.element) {
|
||||
return <Text children={this.state.element} />
|
||||
}
|
||||
return <Text />
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = HTML
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -8,6 +8,7 @@
|
|||
"dependencies": {
|
||||
"react-native": "^0.4.2",
|
||||
"react-native-blur": "^0.4.2",
|
||||
"react-native-htmlview": "^0.2.0",
|
||||
"react-native-modal": "^0.3.7",
|
||||
"react-native-parallax-view": "git://github.com/lelandrichardson/react-native-parallax-view",
|
||||
"react-native-vector-icons": "^0.6.1",
|
||||
|
|
Loading…
Reference in New Issue