react native 虚拟html页面

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
}