Няма описание

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. 'use strict'
  2. import React, { PureComponent } from 'react';
  3. import {
  4. Animated,
  5. Dimensions,
  6. StyleSheet,
  7. View,
  8. ViewPropTypes,
  9. WebView
  10. } from 'react-native';
  11. import PropTypes from 'prop-types';
  12. export default class AutoHeightWebView extends PureComponent {
  13. static propTypes = {
  14. hasIframe: PropTypes.bool,
  15. source: WebView.propTypes.source,
  16. onHeightUpdated: PropTypes.func,
  17. customScript: PropTypes.string,
  18. customStyle: PropTypes.string,
  19. enableAnimation: PropTypes.bool,
  20. // if set to true may cause some layout issues (smaller font size)
  21. scalesPageToFit: PropTypes.bool,
  22. // only works on enable animation
  23. animationDuration: PropTypes.number,
  24. // offset of rn webview margin
  25. heightOffset: PropTypes.number,
  26. style: ViewPropTypes.style,
  27. // rn WebView callback
  28. onError: PropTypes.func,
  29. onLoad: PropTypes.func,
  30. onLoadStart: PropTypes.func,
  31. onLoadEnd: PropTypes.func,
  32. onShouldStartLoadWithRequest: PropTypes.func,
  33. // add web/files... to project root
  34. files: PropTypes.arrayOf(PropTypes.shape({
  35. href: PropTypes.string,
  36. type: PropTypes.string,
  37. rel: PropTypes.string
  38. }))
  39. }
  40. static defaultProps = {
  41. scalesPageToFit: false,
  42. enableAnimation: true,
  43. animationDuration: 555,
  44. heightOffset: 12
  45. }
  46. constructor(props) {
  47. super(props);
  48. this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
  49. if (this.props.enableAnimation) {
  50. this.opacityAnimatedValue = new Animated.Value(0);
  51. }
  52. let initialScript = props.hasIframe ? IframeBaseScript : BaseScript;
  53. initialScript = props.files
  54. ? this.appendFilesToHead(props.files, BaseScript)
  55. : BaseScript;
  56. initialScript = props.customStyle
  57. ? this.appendStylesToHead(props.customStyle, initialScript)
  58. : initialScript;
  59. this.state = {
  60. height: 0,
  61. script: initialScript
  62. };
  63. }
  64. componentWillReceiveProps(nextProps) {
  65. let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
  66. if (nextProps.files) {
  67. currentScript = this.appendFilesToHead(nextProps.files, currentScript);
  68. }
  69. currentScript = nextProps.customStyle
  70. ? this.appendStylesToHead(nextProps.customStyle, currentScript)
  71. : currentScript;
  72. this.setState({ script: currentScript });
  73. }
  74. appendFilesToHead(files, script) {
  75. if (!files) {
  76. return script;
  77. }
  78. return files.reduceRight((file, combinedScript) => `
  79. var link = document.createElement('link');
  80. link.rel = '${file.rel}';
  81. link.type = '${file.type}';
  82. link.href = '${file.href}';
  83. document.head.appendChild(link);
  84. ${combinedScript}
  85. `, script);
  86. }
  87. appendStylesToHead(styles, script) {
  88. if (!styles) {
  89. return script;
  90. }
  91. // Escape any single quotes or newlines in the CSS with .replace()
  92. const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
  93. return `
  94. var styleElement = document.createElement('style');
  95. var styleText = document.createTextNode('${escaped}');
  96. styleElement.appendChild(styleText);
  97. document.head.appendChild(styleElement);
  98. ${script}
  99. `;
  100. }
  101. onHeightUpdated(height) {
  102. if (this.props.onHeightUpdated) {
  103. this.props.onHeightUpdated(height);
  104. }
  105. }
  106. handleNavigationStateChange(navState) {
  107. const height = Number(navState.title);
  108. if (height && height !== this.state.height) {
  109. if (this.props.enableAnimation) {
  110. this.opacityAnimatedValue.setValue(0);
  111. }
  112. this.setState({ height }, () => {
  113. if (this.props.enableAnimation) {
  114. Animated.timing(this.opacityAnimatedValue, {
  115. toValue: 1,
  116. duration: this.props.animationDuration
  117. }).start(() => this.onHeightUpdated(height));
  118. }
  119. else {
  120. this.onHeightUpdated(height);
  121. }
  122. });
  123. }
  124. }
  125. render() {
  126. const { height, script } = this.state;
  127. const { onError, onLoad, onLoadStart, onLoadEnd, onShouldStartLoadWithRequest, scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
  128. const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
  129. return (
  130. <Animated.View style={[Styles.container, {
  131. opacity: enableAnimation ? this.opacityAnimatedValue : 1,
  132. height: height + heightOffset,
  133. }, style]}>
  134. <WebView
  135. onError={onError}
  136. onLoad={onLoad}
  137. onLoadStart={onLoadStart}
  138. onLoadEnd={onLoadEnd}
  139. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  140. style={Styles.webView}
  141. injectedJavaScript={script + customScript}
  142. scrollEnabled={false}
  143. scalesPageToFit={scalesPageToFit}
  144. source={webViewSource}
  145. onNavigationStateChange={this.handleNavigationStateChange} />
  146. </Animated.View>
  147. );
  148. }
  149. }
  150. const ScreenWidth = Dimensions.get('window').width;
  151. const Styles = StyleSheet.create({
  152. container: {
  153. width: ScreenWidth,
  154. backgroundColor: 'transparent'
  155. },
  156. webView: {
  157. flex: 1,
  158. backgroundColor: 'transparent'
  159. }
  160. });
  161. const BaseScript =
  162. `
  163. ;
  164. (function () {
  165. var i = 0;
  166. var height = 0;
  167. var wrapper = document.createElement('div');
  168. wrapper.id = 'height-wrapper';
  169. while (document.body.firstChild) {
  170. wrapper.appendChild(document.body.firstChild);
  171. }
  172. document.body.appendChild(wrapper);
  173. function updateHeight() {
  174. if(document.body.offsetHeight !== height) {
  175. height = wrapper.clientHeight;
  176. document.title = wrapper.clientHeight;
  177. window.location.hash = ++i;
  178. }
  179. }
  180. updateHeight();
  181. window.addEventListener('load', updateHeight);
  182. window.addEventListener('resize', updateHeight);
  183. } ());
  184. `;
  185. const IframeBaseScript =
  186. `
  187. ;
  188. (function () {
  189. var i = 0;
  190. var height = 0;
  191. function updateHeight() {
  192. if(document.body.offsetHeight !== height) {
  193. height = document.body.firstChild.clientHeight;
  194. document.title = document.body.firstChild.clientHeight;
  195. window.location.hash = ++i;
  196. }
  197. }
  198. updateHeight();
  199. window.addEventListener('load', updateHeight);
  200. window.addEventListener('resize', updateHeight);
  201. } ());
  202. `;