AnnounceDetail.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import React, { Component } from 'react'
  2. import {
  3. StyleSheet,
  4. View,
  5. Platform,
  6. Text,
  7. Dimensions,
  8. StatusBar,
  9. TouchableOpacity,
  10. PixelRatio
  11. } from 'react-native'
  12. import {WebView} from 'react-native-webview';
  13. import { connect } from 'react-redux'
  14. import Icon from '../../../components/Iconfont/Iconfont'
  15. import { ImageBaseUrl } from '../../../utils/fetch/Fetchx.js'
  16. import TopTab from '../../../components/toptab/TopTab'
  17. import { NavigationActions, ScaleUtil, createAction } from '../../../utils'
  18. import { compose } from 'redux'
  19. import { ReturnDate } from '../../../utils/utils'
  20. const { width, height } = Dimensions.get('window')
  21. @connect(({ theme }) => ({ ...theme }))
  22. class AnnounceDetail extends Component {
  23. constructor(props) {
  24. super(props)
  25. this.state = {}
  26. // console.disableYellowBox = true;
  27. }
  28. render() {
  29. console.log(WebView);
  30. const { appTheme } = this.props
  31. const { item } = this.props.navigation.state.params
  32. let html = item.content
  33. html = html
  34. ? html.replace(
  35. /src=\"\/g1\//g,
  36. `style="max-width:${width - 40}px; max-height:${height -
  37. 100}px;" src="${ImageBaseUrl}/g1/`
  38. )
  39. : ''
  40. 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>`
  41. return (
  42. <View
  43. style={[
  44. styles.container,
  45. { backgroundColor: appTheme.backgroundColor },
  46. ]}
  47. >
  48. <StatusBar
  49. animated={true}
  50. barStyle={appTheme.barStyle}
  51. // barStyle={"dark-content"}
  52. backgroundColor={'transparent'}
  53. translucent={true}
  54. />
  55. {/* 头部 */}
  56. <View
  57. style={{
  58. height: HEADERSTYLE.height,
  59. paddingTop: HEADERSTYLE.paddingTop + 5,
  60. backgroundColor: '#fff',
  61. borderBottomColor: '#eee',
  62. borderBottomWidth: 1 / PixelRatio.get(),
  63. }}
  64. >
  65. <View
  66. style={{
  67. flex: 1,
  68. justifyContent: 'center',
  69. }}
  70. >
  71. <TouchableOpacity
  72. style={{ position: 'absolute', left: 10, flexDirection: 'row' }}
  73. onPress={() => this.props.dispatch(NavigationActions.back())}
  74. >
  75. <Icon
  76. name="icon-icon-fanhui"
  77. size={20}
  78. color={'#666'}
  79. style={{ marginTop: 4 }}
  80. />
  81. <Text
  82. style={{
  83. fontSize: 14,
  84. lineHeight: 20,
  85. color: '#666',
  86. alignSelf: 'center',
  87. }}
  88. >
  89. 返回
  90. </Text>
  91. </TouchableOpacity>
  92. <Text
  93. style={{
  94. alignSelf: 'center',
  95. fontSize: 18,
  96. lineHeight: 25,
  97. letterSpacing: 0.19,
  98. color: '#333',
  99. }}
  100. >
  101. 公告详情
  102. </Text>
  103. </View>
  104. </View>
  105. <View
  106. style={{
  107. flex: 1,
  108. paddingVertical: 10,
  109. paddingHorizontal: 20,
  110. backgroundColor: '#FFF',
  111. }}
  112. >
  113. <View>
  114. <Text
  115. style={{
  116. fontSize: 16,
  117. letterSpacing: 0.19,
  118. lineHeight: 22,
  119. color: '#333',
  120. fontWeight: '500',
  121. alignSelf: 'center',
  122. }}
  123. >
  124. {item.title}
  125. </Text>
  126. <Text
  127. style={{
  128. fontSize: 12,
  129. letterSpacing: 0.14,
  130. lineHeight: 17,
  131. marginTop: 10,
  132. color: '#999',
  133. }}
  134. >
  135. 发布时间:{ReturnDate(item.pubdate, true)}
  136. </Text>
  137. </View>
  138. <WebView
  139. domStorageEnabled={true}
  140. javaScriptEnabled={true}
  141. automaticallyAdjustContentInsets={true}
  142. mediaPlaybackRequiresUserAction={true}
  143. bounces={false}
  144. style={{
  145. width: width - 40,
  146. marginTop: 10,
  147. }}
  148. source={{ html: html5, baseUrl: '' }}
  149. scalesPageToFit={Platform.OS === 'ios' ? true : false}
  150. saveFormDataDisabled={true}
  151. contentInset={{ top: 0, left: 0, right: 0, bottom: 0 }}
  152. onNavigationStateChange={info => {
  153. this.setState({
  154. WebViewHeight: info.url.replace('about:blank%23', '') / 1,
  155. })
  156. }}
  157. />
  158. </View>
  159. </View>
  160. )
  161. }
  162. }
  163. const styles = StyleSheet.create({
  164. container: {
  165. flex: 1,
  166. },
  167. })
  168. export default AnnounceDetail