暂无描述

index.ios.js 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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. // add web/files... to project root
  28. files: PropTypes.arrayOf(PropTypes.shape({
  29. href: PropTypes.string,
  30. type: PropTypes.string,
  31. rel: PropTypes.string
  32. }))
  33. }
  34. static defaultProps = {
  35. scalesPageToFit: false,
  36. enableAnimation: true,
  37. animationDuration: 555,
  38. heightOffset: 12
  39. }
  40. constructor(props) {
  41. super(props);
  42. this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
  43. if (this.props.enableAnimation) {
  44. this.opacityAnimatedValue = new Animated.Value(0);
  45. }
  46. let initialScript = props.hasIframe ? IframeBaseScript : BaseScript;
  47. initialScript = props.files
  48. ? this.appendFilesToHead(props.files, BaseScript)
  49. : BaseScript;
  50. initialScript = props.customStyle
  51. ? this.appendStylesToHead(props.customStyle, initialScript)
  52. : initialScript;
  53. this.state = {
  54. height: 0,
  55. script: initialScript
  56. };
  57. }
  58. componentWillReceiveProps(nextProps) {
  59. let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
  60. if (nextProps.files) {
  61. currentScript = this.appendFilesToHead(nextProps.files, currentScript);
  62. }
  63. currentScript = nextProps.customStyle
  64. ? this.appendStylesToHead(nextProps.customStyle, currentScript)
  65. : currentScript;
  66. this.setState({ script: currentScript });
  67. }
  68. appendFilesToHead(files, script) {
  69. if (!files) {
  70. return script;
  71. }
  72. return files.reduceRight((file, combinedScript) => `
  73. var link = document.createElement('link');
  74. link.rel = '${file.rel}';
  75. link.type = '${file.type}';
  76. link.href = '${file.href}';
  77. document.head.appendChild(link);
  78. ${combinedScript}
  79. `, script)
  80. }
  81. appendStylesToHead(styles, script) {
  82. if (!styles) {
  83. return script;
  84. }
  85. // Escape any single quotes or newlines in the CSS with .replace()
  86. const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
  87. return `
  88. var styleElement = document.createElement('style');
  89. var styleText = document.createTextNode('${escaped}');
  90. styleElement.appendChild(styleText);
  91. document.head.appendChild(styleElement);
  92. ${script}
  93. `
  94. }
  95. onHeightUpdated(height) {
  96. if (this.props.onHeightUpdated) {
  97. this.props.onHeightUpdated(height);
  98. }
  99. }
  100. handleNavigationStateChange(navState) {
  101. const height = Number(navState.title);
  102. if (height && height !== this.state.height) {
  103. if (this.props.enableAnimation) {
  104. this.opacityAnimatedValue.setValue(0);
  105. }
  106. this.setState({ height }, () => {
  107. if (this.props.enableAnimation) {
  108. Animated.timing(this.opacityAnimatedValue, {
  109. toValue: 1,
  110. duration: this.props.animationDuration
  111. }).start(() => this.onHeightUpdated(height));
  112. }
  113. else {
  114. this.onHeightUpdated(height);
  115. }
  116. });
  117. }
  118. }
  119. render() {
  120. const { height, script } = this.state;
  121. const { scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
  122. const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
  123. return (
  124. <Animated.View style={[Styles.container, {
  125. opacity: enableAnimation ? this.opacityAnimatedValue : 1,
  126. height: height + heightOffset,
  127. }, style]}>
  128. <WebView
  129. style={Styles.webView}
  130. injectedJavaScript={script + customScript}
  131. scrollEnabled={false}
  132. scalesPageToFit={scalesPageToFit}
  133. source={webViewSource}
  134. onNavigationStateChange={this.handleNavigationStateChange} />
  135. </Animated.View>
  136. );
  137. }
  138. }
  139. const ScreenWidth = Dimensions.get('window').width;
  140. const Styles = StyleSheet.create({
  141. container: {
  142. width: ScreenWidth,
  143. backgroundColor: 'transparent'
  144. },
  145. webView: {
  146. flex: 1,
  147. backgroundColor: 'transparent'
  148. }
  149. });
  150. const BaseScript =
  151. `
  152. ;
  153. (function () {
  154. var i = 0;
  155. var height = 0;
  156. var wrapper = document.createElement('div');
  157. wrapper.id = 'height-wrapper';
  158. while (document.body.firstChild) {
  159. wrapper.appendChild(document.body.firstChild);
  160. }
  161. document.body.appendChild(wrapper);
  162. function updateHeight() {
  163. if(document.body.offsetHeight !== height) {
  164. height = wrapper.clientHeight;
  165. document.title = wrapper.clientHeight;
  166. window.location.hash = ++i;
  167. }
  168. }
  169. updateHeight();
  170. window.addEventListener('load', updateHeight);
  171. window.addEventListener('resize', updateHeight);
  172. } ());
  173. `;
  174. const IframeBaseScript =
  175. `
  176. ;
  177. (function () {
  178. var i = 0;
  179. var height = 0;
  180. function updateHeight() {
  181. if(document.body.offsetHeight !== height) {
  182. height = document.body.firstChild.clientHeight;
  183. document.title = document.body.firstChild.clientHeight;
  184. window.location.hash = ++i;
  185. }
  186. }
  187. updateHeight();
  188. window.addEventListener('load', updateHeight);
  189. window.addEventListener('resize', updateHeight);
  190. } ());
  191. `;