MayDos
/
occ-mobile


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Dimensions,
  Platform,
  ScrollView,
} from 'react-native'
import {WebView} from 'react-native-webview';
import { connect } from 'react-redux'
import { ImageBaseUrl } from '../../../utils/fetch/Fetchx'

const { width, height } = Dimensions.get('window')
@connect(({ detail }) => ({ ...detail }))
class Details extends Component {
  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }
  constructor() {
    super()
    this.state = {
      WebViewHeight: 0,
    }
  }

  render() {
    const { detailDatas } = this.props
    let html = detailDatas.description
    html = html
      ? html.replace(
          /src=\"\/g1\//g,
          `style="max-width:${width - 20}px; max-height:${height -
            100}px;" src="${ImageBaseUrl}/g1/`
        )
      : ''
    let html5 = `<!DOCTYPE html> <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"><html><head><meta charset="utf-8"></head><body>${html}</body></html>`
    return (
      <View style={{ flex: 1, padding: 10 }}>
        {/* <View style={styles.card}> */}
        <WebView
          domStorageEnabled={true}
          javaScriptEnabled={true}
          automaticallyAdjustContentInsets={true}
          mediaPlaybackRequiresUserAction={true}
          bounces={false}
          style={{
            width: width - 20,
            marginTop: 10,
          }}
          source={{ html: html5, baseUrl: '' }}
          scalesPageToFit={Platform.OS === 'ios' ? true : false}
          saveFormDataDisabled={true}
          contentInset={{ top: 0, left: 0, right: 0, bottom: 0 }}
          onNavigationStateChange={info => {
            this.setState({
              WebViewHeight: info.url.replace('about:blank%23', '') / 1,
            })
          }}
        />
        {/* </View> */}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerFont: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
  },
  icon: {
    width: 32,
    height: 32,
  },
  tabView: {
    flex: 1,
    // padding: 15,
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
  card: {
    borderWidth: 1,
    backgroundColor: '#fff',
    borderColor: 'rgba(0,0,0,0.1)',
    margin: 5,
    // height: 150,
    padding: 15,
    shadowColor: '#ccc',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
})

export default Details