暫無描述

index.android.js 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. 'use strict'
  2. import React, {
  3. Component,
  4. PropTypes
  5. } from 'react';
  6. import {
  7. findNodeHandle,
  8. requireNativeComponent,
  9. Animated,
  10. DeviceEventEmitter,
  11. Dimensions,
  12. Platform,
  13. UIManager,
  14. View,
  15. WebView
  16. } from 'react-native';
  17. import ImmutableComponent from 'react-immutable-component';
  18. import Immutable from 'immutable';
  19. const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
  20. export default class AutoHeightWebView extends ImmutableComponent {
  21. constructor(props) {
  22. super(props);
  23. this.onMessage = this.onMessage.bind(this);
  24. if (this.props.enableAnimation) {
  25. this.opacityAnimatedValue = new Animated.Value(0);
  26. }
  27. if (IsBelowKitKat) {
  28. this.listenWebViewBridgeMessage = this.listenWebViewBridgeMessage.bind(this);
  29. }
  30. const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
  31. this.state = {
  32. isChangingSource: false,
  33. height: 0,
  34. heightOffset: 0,
  35. script: initialScript
  36. };
  37. }
  38. componentWillMount() {
  39. if (IsBelowKitKat) {
  40. DeviceEventEmitter.addListener("webViewBridgeMessage", this.listenWebViewBridgeMessage);
  41. }
  42. }
  43. componentDidMount() {
  44. this.startInterval();
  45. }
  46. componentWillReceiveProps(nextProps) {
  47. // injectedJavaScript only works when webview reload (source changed)
  48. if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
  49. return;
  50. }
  51. else {
  52. this.setState({
  53. isChangingSource: true,
  54. height: 0,
  55. heightOffset: 0
  56. }, () => {
  57. this.startInterval();
  58. this.setState({ isChangingSource: false });
  59. });
  60. }
  61. let currentScript = BaseScript;
  62. if (nextProps.files) {
  63. currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
  64. }
  65. this.setState({ script: currentScript });
  66. }
  67. // componentDidUpdate(prevProps, prevState) {
  68. // // redisplay webview when changing source
  69. // if (this.state.isChangingSource) {
  70. // this.startInterval();
  71. // this.setState({ isChangingSource: false });
  72. // }
  73. // }
  74. componentWillUnmount() {
  75. this.stopInterval();
  76. if (IsBelowKitKat) {
  77. DeviceEventEmitter.removeListener("webViewBridgeMessage", this.listenWebViewBridgeMessage);
  78. }
  79. }
  80. // below kitkat
  81. listenWebViewBridgeMessage(body) {
  82. this.onMessage(body.message);
  83. }
  84. postMessage(data) {
  85. UIManager.dispatchViewManagerCommand(
  86. findNodeHandle(this.webview),
  87. UIManager.RCTAutoHeightWebView.Commands.postMessage,
  88. [String(data)]
  89. );
  90. };
  91. // below kitkat
  92. sendToWebView(message) {
  93. UIManager.dispatchViewManagerCommand(
  94. findNodeHandle(this.webview),
  95. UIManager.RCTAutoHeightWebView.Commands.sendToWebView,
  96. [String(message)]
  97. );
  98. }
  99. startInterval() {
  100. this.finishInterval = false;
  101. this.interval = setInterval(() => {
  102. if (!this.finishInterval) {
  103. IsBelowKitKat ? this.sendToWebView('getBodyHeight') : this.postMessage('getBodyHeight');
  104. }
  105. }, 205);
  106. }
  107. stopInterval() {
  108. this.finishInterval = true;
  109. clearInterval(this.interval);
  110. }
  111. onHeightUpdated(height) {
  112. if (this.props.onHeightUpdated) {
  113. this.props.onHeightUpdated(height);
  114. }
  115. }
  116. onMessage(e) {
  117. const height = parseInt(IsBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
  118. if (height) {
  119. if (this.props.enableAnimation) {
  120. this.opacityAnimatedValue.setValue(0);
  121. }
  122. this.stopInterval();
  123. this.setState({
  124. heightOffset: this.props.heightOffset,
  125. height
  126. }, () => {
  127. if (this.props.enableAnimation) {
  128. Animated.timing(this.opacityAnimatedValue, {
  129. toValue: 1,
  130. duration: this.props.animationDuration
  131. }).start(() => this.onHeightUpdated(height));
  132. }
  133. else {
  134. this.onHeightUpdated(height);
  135. }
  136. });
  137. }
  138. }
  139. appendFilesToHead(files, script) {
  140. if (!files) {
  141. return script;
  142. }
  143. for (let file of files) {
  144. script =
  145. `
  146. var link = document.createElement('link');
  147. link.rel = '` + file.rel + `';
  148. link.type = '` + file.type + `';
  149. link.href = '` + file.href + `';
  150. document.head.appendChild(link);
  151. `+ script;
  152. }
  153. return script;
  154. }
  155. render() {
  156. const { height, script, isChangingSource, heightOffset } = this.state;
  157. const { enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
  158. let webViewSource = source;
  159. if (enableBaseUrl) {
  160. webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
  161. }
  162. return (
  163. <Animated.View style={[{
  164. opacity: enableAnimation ? this.opacityAnimatedValue : 1,
  165. width: ScreenWidth,
  166. height: height + heightOffset,
  167. backgroundColor: 'transparent'
  168. }, style]}>
  169. {
  170. isChangingSource ? null :
  171. <RCTAutoHeightWebView
  172. ref={webview => this.webview = webview}
  173. style={{
  174. flex: 1,
  175. backgroundColor: 'transparent'
  176. }}
  177. javaScriptEnabled={true}
  178. injectedJavaScript={script + customScript}
  179. scrollEnabled={false}
  180. source={webViewSource}
  181. onMessage={this.onMessage}
  182. messagingEnabled={true}
  183. // below kitkat
  184. onChange={this.onMessage} />
  185. }
  186. </Animated.View>
  187. );
  188. }
  189. }
  190. AutoHeightWebView.propTypes = {
  191. enableAnimation: PropTypes.bool,
  192. source: WebView.propTypes.source,
  193. onHeightUpdated: PropTypes.func,
  194. customScript: PropTypes.string,
  195. // offset rn webview margin
  196. heightOffset: PropTypes.number,
  197. // baseUrl not work in android 4.3 or below version
  198. enableBaseUrl: PropTypes.bool,
  199. style: View.propTypes.style,
  200. // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
  201. files: PropTypes.arrayOf(PropTypes.shape({
  202. href: PropTypes.string,
  203. type: PropTypes.string,
  204. rel: PropTypes.string
  205. }))
  206. }
  207. AutoHeightWebView.defaultProps = {
  208. animationDuration: 555,
  209. enableBaseUrl: false,
  210. heightOffset: 20
  211. }
  212. const ScreenWidth = Dimensions.get('window').width;
  213. const IsBelowKitKat = Platform.Version < 19;
  214. const BaseScript =
  215. IsBelowKitKat ?
  216. `
  217. ; (function () {
  218. AutoHeightWebView.onMessage = function (message) {
  219. AutoHeightWebView.send(String(document.body.offsetHeight));
  220. };
  221. } ());
  222. ` :
  223. `
  224. ; (function () {
  225. document.addEventListener('message', function (e) {
  226. window.postMessage(String(document.body.offsetHeight));
  227. });
  228. } ());
  229. `;