No Description

index.android.js 7.2KB

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