html转换react native,react native 虚拟html页面

vpages

import { Animated, Button, StyleSheet, Text, View, Dimensions } from 'react-native';

const {width, height} = Dimensions.get('window');

const androidHeight = height-24

var styles = {

ul: {

marginLeft: 0

},

html: {

item: {

width: width,

marginTop: 24,

},

ul: {

height: androidHeight,

backgroundColor: '#ffffff'

}

},

head: {

item: {

position: 'absolute',

top: 0,

left: 0,

height: 50,

width: width,

backgroundColor: '#c9c9c9',

},

itemText: {

color: '#000000'

}

},

body: {

item: {

flex: 1,

marginTop: 50

}

},

foot: {

item: {

position: 'absolute',

bottom: 0,

left: 0,

height: 70,

width: width,

backgroundColor: '#c9c9c9'

},

itemText: {

color: '#000000'

}

},

test: {

item: {

height: 80,

backgroundColor: '#ae5273'

},

itemText: {

color: '#ffffff'

}

}

}

class Vpages extends React.Component {

constructor(props){

super(props)

this.state = {

vpages: this.props.data || []

}

}

render(){

const stys = Aotoo.merge({}, styles, this.props.style)

return Aotoo.tree(

{ data: this.state.vpages },

stys

)

}

}

function findIndex(vpages, select, pre){

let index

if (!pre) {

vpages.forEach( (ele, ii) => {

if (ele.parent == select) { index = ii }

});

}

if (!index) index = Aotoo.findIndex(vpages, o=>o.idf==select)

return index

}

const Actions = {

APPEND: function(ostate, opts){

var state = this.curState

var vpages = state.vpages

const select = opts.select

const content = opts.content

const className = opts.className

const id = opts.id

const index = findIndex(vpages, select)

const wanner = {title: content, idf: id, parent: select, className}

vpages.splice( (index+1), 0, wanner)

return state

},

PREPEND: function(ostate, opts){

var state = this.curState

var vpages = state.vpages

const select = opts.select

const content = opts.content

const className = opts.className

const id = opts.id

const index = findIndex(vpages, select, true)

const wanner = {title: content, idf: id, parent: select, className}

vpages.splice( (index+1), 0, wanner)

return state

},

REMOVE: function(ostate, opts){

var state = this.curState

var vpages = state.vpages

const select = opts.select

const index = findIndex(vpages, select, true)

vpages.splice( index, 1 )

return state

},

UPDATE: function(ostate, opts){

var state = this.curState

var vpages = state.vpages

const content = opts.content

const className = opts.className

const index = findIndex(vpages, select, true)

let resource = vpages[index]

resource.title = content

resource.className = className

return state

}

}

function myTemplate(newTmp){

const _tmp = {

empty: [

{title: '', idf: 'html', className: 'html'},

],

html: [

{title: '', idf: 'html', className: 'html'},

{title: '', idf: 'head', parent: 'html', className: 'head'},

{title: '', idf: 'body', parent: 'html', className: 'body'},

{title: '', idf: 'foot', parent: 'html', className: 'foot'},

]

}

if (newTmp) {

return Aotoo.merge({}, _tmp, newTmp)

} else {

return _tmp

}

}

module.exports = function(opts){

let template = myTemplate()

if (typeof opts == 'string' || !opts) {

const tmp = opts || 'empty'

if (template[tmp]) {

opts = {

props: {

data: template[tmp]

}

}

} else {

opts = {}

}

}

if (!opts.props) {

opts.props = {

data: template.empty

}

}

if (opts.props && !opts.props.data) {

opts.props.data = template.empty

}

if (opts.props && typeof opts.props.data == 'string') {

if (!template[opts.props.data]) {

opts.props.data = 'empty'

}

opts.props.data = template[opts.props.data]

}

const Vp = Aotoo(Vpages, Actions)

function visualPages(select){

return Vp.$(select)

}

visualPages.template = function(newTemplate){

template = myTemplate(newTemplate)

}

visualPages.render = function(id, fun){

Vp.setConfig(opts)

Vp.rendered = visualPages.rendered

return Vp.render(id, fun)

}

Vp.extend({

$: function(select){

const that = this

const index = findIndex(opts.props.data, select, true)

if (!index) return

return {

append: function(options){

let {content, id, className} = options

if (!id) id = Aotoo.uniqueId('visualPage_')

if (that.hasMounted()) {

that.dispatch ('APPEND', { select, content, id, className })

} else {

const index = findIndex(opts.props.data, select)

const wanner = {title: content, idf: id, parent: select, className}

opts.props.data.splice( (index+1), 0, wanner)

}

return visualPages(id)

},

prepend: function(options){

let {content, id, className} = options

if (!id) id = Aotoo.uniqueId('visualPage_')

if (that.hasMounted()) {

that.dispatch ('PREPEND', { select, content, id, className })

} else {

const index = findIndex(opts.props.data, select, true)

const wanner = {title: content, idf: id, parent: select, className}

opts.props.data.splice( (index+1), 0, wanner)

}

return visualPages(id)

},

remove: function(){

if (that.hasMounted()) {

that.dispatch ('REMOVE', { select })

} else {

const index = findIndex(opts.props.data, select, true)

opts.props.data.splice( index, 1 )

}

},

update: function(options){

let {content, className} = options

if (that.hasMounted()) {

that.dispatch ('UPDATE', { content, className })

} else {

const index = findIndex(opts.props.data, select, true)

if (index) {

opts.props.data[index]['title'] = content

opts.props.data[index]['className'] = className

}

}

return visualPages(select)

},

get: function(){

const index = findIndex(opts.props.data, select, true)

if (index) {

return opts.props.data[index]

}

},

animat: function(){}

}

}

})

return visualPages

}