No Description

index.ios.js 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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. enableAnimation: PropTypes.bool,
  19. // if set to true may cause some layout issues (smaller font size)
  20. scalesPageToFit: PropTypes.bool,
  21. // only works on enable animation
  22. animationDuration: PropTypes.number,
  23. // offset of rn webview margin
  24. heightOffset: PropTypes.number,
  25. style: ViewPropTypes.style,
  26. // add web/files... to project root
  27. files: PropTypes.arrayOf(PropTypes.shape({
  28. href: PropTypes.string,
  29. type: PropTypes.string,
  30. rel: PropTypes.string
  31. }))
  32. }
  33. static defaultProps = {
  34. scalesPageToFit: false,
  35. enableAnimation: true,
  36. animationDuration: 555,
  37. heightOffset: 12
  38. }
  39. constructor(props) {
  40. super(props);
  41. this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
  42. if (this.props.enableAnimation) {
  43. this.opacityAnimatedValue = new Animated.Value(0);
  44. }
  45. const initialScript = props.files ? this.appendFilesToHead(props.files, props.hasIframe ? IframeBaseScript : BaseScript) : props.hasIframe ? IframeBaseScript : BaseScript;
  46. this.state = {
  47. height: 0,
  48. script: initialScript
  49. };
  50. }
  51. componentWillReceiveProps(nextProps) {
  52. let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
  53. if (nextProps.files) {
  54. currentScript = this.appendFilesToHead(nextProps.files, nextProps.hasIframe ? IframeBaseScript : BaseScript);
  55. }
  56. this.setState({ script: currentScript });
  57. }
  58. appendFilesToHead(files, script) {
  59. if (!files) {
  60. return script;
  61. }
  62. for (let file of files) {
  63. script =
  64. `
  65. var link = document.createElement('link');
  66. link.rel = '` + file.rel + `';
  67. link.type = '` + file.type + `';
  68. link.href = '` + file.href + `';
  69. document.head.appendChild(link);
  70. `+ script;
  71. }
  72. return script;
  73. }
  74. onHeightUpdated(height) {
  75. if (this.props.onHeightUpdated) {
  76. this.props.onHeightUpdated(height);
  77. }
  78. }
  79. handleNavigationStateChange(navState) {
  80. const height = Number(navState.title);
  81. if (height && height !== this.state.height) {
  82. if (this.props.enableAnimation) {
  83. this.opacityAnimatedValue.setValue(0);
  84. }
  85. this.setState({ height }, () => {
  86. if (this.props.enableAnimation) {
  87. Animated.timing(this.opacityAnimatedValue, {
  88. toValue: 1,
  89. duration: this.props.animationDuration
  90. }).start(() => this.onHeightUpdated(height));
  91. }
  92. else {
  93. this.onHeightUpdated(height);
  94. }
  95. });
  96. }
  97. }
  98. render() {
  99. const { height, script } = this.state;
  100. const { scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
  101. const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
  102. return (
  103. <Animated.View style={[Styles.container, {
  104. opacity: enableAnimation ? this.opacityAnimatedValue : 1,
  105. height: height + heightOffset,
  106. }, style]}>
  107. <WebView
  108. style={Styles.webView}
  109. injectedJavaScript={script + customScript}
  110. scrollEnabled={false}
  111. scalesPageToFit={scalesPageToFit}
  112. source={webViewSource}
  113. onNavigationStateChange={this.handleNavigationStateChange} />
  114. </Animated.View>
  115. );
  116. }
  117. }
  118. const ScreenWidth = Dimensions.get('window').width;
  119. const Styles = StyleSheet.create({
  120. container: {
  121. width: ScreenWidth,
  122. backgroundColor: 'transparent'
  123. },
  124. webView: {
  125. flex: 1,
  126. backgroundColor: 'transparent'
  127. }
  128. });
  129. const BaseScript =
  130. `
  131. ;
  132. (function () {
  133. var i = 0;
  134. var height = 0;
  135. var wrapper = document.createElement('div');
  136. wrapper.id = 'height-wrapper';
  137. while (document.body.firstChild) {
  138. wrapper.appendChild(document.body.firstChild);
  139. }
  140. document.body.appendChild(wrapper);
  141. function updateHeight() {
  142. if(document.body.offsetHeight !== height) {
  143. height = wrapper.clientHeight;
  144. document.title = wrapper.clientHeight;
  145. window.location.hash = ++i;
  146. }
  147. }
  148. updateHeight();
  149. window.addEventListener('load', updateHeight);
  150. window.addEventListener('resize', updateHeight);
  151. } ());
  152. `;
  153. const IframeBaseScript =
  154. `
  155. ;
  156. (function () {
  157. var i = 0;
  158. var height = 0;
  159. function updateHeight() {
  160. if(document.body.offsetHeight !== height) {
  161. height = document.body.firstChild.clientHeight;
  162. document.title = document.body.firstChild.clientHeight;
  163. window.location.hash = ++i;
  164. }
  165. }
  166. updateHeight();
  167. window.addEventListener('load', updateHeight);
  168. window.addEventListener('resize', updateHeight);
  169. } ());
  170. `;