├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── index.js ├── libs └── html.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_* 2 | node_modules 3 | *.sublime* 4 | psd 5 | thumb 6 | *.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_* 2 | node_modules 3 | *.sublime* 4 | psd 5 | thumb 6 | *.log 7 | example -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 turing <o.u.turing@Gmail.com> 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## react-native-html ![NPM version](https://img.shields.io/npm/v/react-native-html.svg?style=flat) 2 | 3 | Render html string as react native custom elements 4 | 5 | **Tips:** WIP, only support and right now. 6 | 7 | ### Installation 8 | ```bash 9 | $ npm install react-native-html --save 10 | ``` 11 | 12 | ### Example 13 | ```js 14 | var React = require('react-native'); 15 | var { 16 | AppRegistry, 17 | View 18 | } = React; 19 | var ReactHtml = require('react-native-html'); 20 | 21 | var App = React.createClass({ 22 | render: function() { 23 | return ( 24 | 25 | 26 | Some text else. 27 | 28 | ); 29 | } 30 | }); 31 | 32 | AppRegistry.registerComponent('myApp', () => App); 33 | ``` 34 | 35 | ### Contributing 36 | - Fork this repo 37 | - Clone your repo 38 | - Install dependencies 39 | - Checkout a feature branch 40 | - Feel free to add your features 41 | - Make sure your features are fully tested 42 | - Open a pull request, and enjoy <3 43 | 44 | ### MIT license 45 | Copyright (c) 2015 turing <o.u.turing@Gmail.com> 46 | 47 | Permission is hereby granted, free of charge, to any person obtaining a copy 48 | of this software and associated documentation files (the "Software"), to deal 49 | in the Software without restriction, including without limitation the rights 50 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 51 | copies of the Software, and to permit persons to whom the Software is 52 | furnished to do so, subject to the following conditions: 53 | 54 | The above copyright notice and this permission notice shall be included in 55 | all copies or substantial portions of the Software. 56 | 57 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 58 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 59 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 60 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 61 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 62 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 63 | THE SOFTWARE. 64 | 65 | --- 66 | ![docor](https://raw.githubusercontent.com/turingou/docor/master/docor.png) 67 | built upon love by [docor](https://github.com/turingou/docor.git) v0.2.0 -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./libs/html'); -------------------------------------------------------------------------------- /libs/html.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | Image, 4 | Text, 5 | View, 6 | } = React; 7 | 8 | var ReactHtml = React.createClass({ 9 | componentWillMount: function() { 10 | this.renderer = function(html) { 11 | var images = html.match(/]*>/); 12 | 13 | if (!images) 14 | return React.createElement(Text, {}, html); 15 | 16 | // Instead of parsing HTML 17 | // We simply use string splits function 18 | // To split different parts as a ast tree. 19 | var texts = html.split(/]*>/); 20 | var ret = []; 21 | 22 | texts.forEach((text, index) => { 23 | var src; 24 | if (images[index]) { 25 | var srcWithQuotes = images[index].match(/src\=([^\s]*)\s/)[1] 26 | src = srcWithQuotes.substring(1,srcWithQuotes.length - 1); 27 | } 28 | 29 | if (text && text !== ' ') 30 | ret.push(React.createElement(Text, {}, text)) 31 | 32 | if (src) { 33 | ret.push(React.createElement(Image, { 34 | source: { uri: src }, 35 | style: { 36 | width: 10, 37 | height: 10 38 | } 39 | })) 40 | } 41 | }); 42 | 43 | return ret; 44 | } 45 | }, 46 | 47 | render: function() { 48 | return { this.renderer(this.props.children) }; 49 | } 50 | }); 51 | 52 | module.exports = ReactHtml; 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-html", 3 | "version": "0.1.0", 4 | "description": "render html as react native custom elements", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:turingou/react-native-html.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "native", 13 | "html" 14 | ], 15 | "author": "turing ", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/turingou/react-native-html/issues" 19 | }, 20 | "homepage": "https://github.com/turingou/react-native-html", 21 | "dependencies": { 22 | "react-native": "^0.3.1" 23 | } 24 | } 25 | --------------------------------------------------------------------------------