react-native-webview.git

WebView.android.js 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. /**
  2. * Copyright (c) 2015-present, Facebook, Inc.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. */
  9. 'use strict';
  10. import React from 'react';
  11. import ReactNative from 'react-native';
  12. import {
  13. ActivityIndicator,
  14. StyleSheet,
  15. UIManager,
  16. View,
  17. Image,
  18. requireNativeComponent
  19. } from 'react-native';
  20. import keyMirror from 'fbjs/lib/keyMirror';
  21. import WebViewShared from './WebViewShared';
  22. const resolveAssetSource = Image.resolveAssetSource;
  23. const RCT_WEBVIEW_REF = 'webview';
  24. const WebViewState = keyMirror({
  25. IDLE: null,
  26. LOADING: null,
  27. ERROR: null,
  28. });
  29. const defaultRenderLoading = () => (
  30. <View style={styles.loadingView}>
  31. <ActivityIndicator style={styles.loadingProgressBar} />
  32. </View>
  33. );
  34. /**
  35. * Renders a native WebView.
  36. */
  37. class WebView extends React.Component {
  38. static defaultProps = {
  39. javaScriptEnabled: true,
  40. thirdPartyCookiesEnabled: true,
  41. scalesPageToFit: true,
  42. saveFormDataDisabled: false,
  43. originWhitelist: WebViewShared.defaultOriginWhitelist,
  44. };
  45. state = {
  46. viewState: WebViewState.IDLE,
  47. lastErrorEvent: null,
  48. startInLoadingState: true,
  49. };
  50. UNSAFE_componentWillMount() {
  51. if (this.props.startInLoadingState) {
  52. this.setState({ viewState: WebViewState.LOADING });
  53. }
  54. }
  55. render() {
  56. let otherView = null;
  57. if (this.state.viewState === WebViewState.LOADING) {
  58. otherView = (this.props.renderLoading || defaultRenderLoading)();
  59. } else if (this.state.viewState === WebViewState.ERROR) {
  60. const errorEvent = this.state.lastErrorEvent;
  61. otherView =
  62. this.props.renderError &&
  63. this.props.renderError(
  64. errorEvent.domain,
  65. errorEvent.code,
  66. errorEvent.description,
  67. );
  68. } else if (this.state.viewState !== WebViewState.IDLE) {
  69. console.error(
  70. 'RCTWebView invalid state encountered: ' + this.state.loading,
  71. );
  72. }
  73. const webViewStyles = [styles.container, this.props.style];
  74. if (
  75. this.state.viewState === WebViewState.LOADING ||
  76. this.state.viewState === WebViewState.ERROR
  77. ) {
  78. // if we're in either LOADING or ERROR states, don't show the webView
  79. webViewStyles.push(styles.hidden);
  80. }
  81. const source = this.props.source || {};
  82. if (this.props.html) {
  83. source.html = this.props.html;
  84. } else if (this.props.url) {
  85. source.uri = this.props.url;
  86. }
  87. if (source.method === 'POST' && source.headers) {
  88. console.warn(
  89. 'WebView: `source.headers` is not supported when using POST.',
  90. );
  91. } else if (source.method === 'GET' && source.body) {
  92. console.warn('WebView: `source.body` is not supported when using GET.');
  93. }
  94. const nativeConfig = this.props.nativeConfig || {};
  95. const originWhitelist = (this.props.originWhitelist || []).map(
  96. WebViewShared.originWhitelistToRegex,
  97. );
  98. let NativeWebView = nativeConfig.component || RCTWebView;
  99. const webView = (
  100. <NativeWebView
  101. ref={RCT_WEBVIEW_REF}
  102. key="webViewKey"
  103. style={webViewStyles}
  104. source={resolveAssetSource(source)}
  105. scalesPageToFit={this.props.scalesPageToFit}
  106. injectedJavaScript={this.props.injectedJavaScript}
  107. userAgent={this.props.userAgent}
  108. javaScriptEnabled={this.props.javaScriptEnabled}
  109. thirdPartyCookiesEnabled={this.props.thirdPartyCookiesEnabled}
  110. domStorageEnabled={this.props.domStorageEnabled}
  111. messagingEnabled={typeof this.props.onMessage === 'function'}
  112. onMessage={this.onMessage}
  113. contentInset={this.props.contentInset}
  114. automaticallyAdjustContentInsets={
  115. this.props.automaticallyAdjustContentInsets
  116. }
  117. onContentSizeChange={this.props.onContentSizeChange}
  118. onLoadingStart={this.onLoadingStart}
  119. onLoadingFinish={this.onLoadingFinish}
  120. onLoadingError={this.onLoadingError}
  121. testID={this.props.testID}
  122. geolocationEnabled={this.props.geolocationEnabled}
  123. mediaPlaybackRequiresUserAction={
  124. this.props.mediaPlaybackRequiresUserAction
  125. }
  126. allowUniversalAccessFromFileURLs={
  127. this.props.allowUniversalAccessFromFileURLs
  128. }
  129. originWhitelist={originWhitelist}
  130. mixedContentMode={this.props.mixedContentMode}
  131. saveFormDataDisabled={this.props.saveFormDataDisabled}
  132. urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
  133. {...nativeConfig.props}
  134. />
  135. );
  136. return (
  137. <View style={styles.container}>
  138. {webView}
  139. {otherView}
  140. </View>
  141. );
  142. }
  143. goForward = () => {
  144. UIManager.dispatchViewManagerCommand(
  145. this.getWebViewHandle(),
  146. UIManager.RCTWebView.Commands.goForward,
  147. null,
  148. );
  149. };
  150. goBack = () => {
  151. UIManager.dispatchViewManagerCommand(
  152. this.getWebViewHandle(),
  153. UIManager.RCTWebView.Commands.goBack,
  154. null,
  155. );
  156. };
  157. reload = () => {
  158. this.setState({
  159. viewState: WebViewState.LOADING,
  160. });
  161. UIManager.dispatchViewManagerCommand(
  162. this.getWebViewHandle(),
  163. UIManager.RCTWebView.Commands.reload,
  164. null,
  165. );
  166. };
  167. stopLoading = () => {
  168. UIManager.dispatchViewManagerCommand(
  169. this.getWebViewHandle(),
  170. UIManager.RCTWebView.Commands.stopLoading,
  171. null,
  172. );
  173. };
  174. postMessage = data => {
  175. UIManager.dispatchViewManagerCommand(
  176. this.getWebViewHandle(),
  177. UIManager.RCTWebView.Commands.postMessage,
  178. [String(data)],
  179. );
  180. };
  181. /**
  182. * Injects a javascript string into the referenced WebView. Deliberately does not
  183. * return a response because using eval() to return a response breaks this method
  184. * on pages with a Content Security Policy that disallows eval(). If you need that
  185. * functionality, look into postMessage/onMessage.
  186. */
  187. injectJavaScript = data => {
  188. UIManager.dispatchViewManagerCommand(
  189. this.getWebViewHandle(),
  190. UIManager.RCTWebView.Commands.injectJavaScript,
  191. [data],
  192. );
  193. };
  194. /**
  195. * We return an event with a bunch of fields including:
  196. * url, title, loading, canGoBack, canGoForward
  197. */
  198. updateNavigationState = event => {
  199. if (this.props.onNavigationStateChange) {
  200. this.props.onNavigationStateChange(event.nativeEvent);
  201. }
  202. };
  203. getWebViewHandle = () => {
  204. return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
  205. };
  206. onLoadingStart = event => {
  207. const onLoadStart = this.props.onLoadStart;
  208. onLoadStart && onLoadStart(event);
  209. this.updateNavigationState(event);
  210. };
  211. onLoadingError = event => {
  212. event.persist(); // persist this event because we need to store it
  213. const { onError, onLoadEnd } = this.props;
  214. onError && onError(event);
  215. onLoadEnd && onLoadEnd(event);
  216. console.warn('Encountered an error loading page', event.nativeEvent);
  217. this.setState({
  218. lastErrorEvent: event.nativeEvent,
  219. viewState: WebViewState.ERROR,
  220. });
  221. };
  222. onLoadingFinish = event => {
  223. const { onLoad, onLoadEnd } = this.props;
  224. onLoad && onLoad(event);
  225. onLoadEnd && onLoadEnd(event);
  226. this.setState({
  227. viewState: WebViewState.IDLE,
  228. });
  229. this.updateNavigationState(event);
  230. };
  231. onMessage = (event) => {
  232. const { onMessage } = this.props;
  233. onMessage && onMessage(event);
  234. };
  235. }
  236. const RCTWebView = requireNativeComponent('RCTWebView');
  237. const styles = StyleSheet.create({
  238. container: {
  239. flex: 1,
  240. },
  241. hidden: {
  242. height: 0,
  243. flex: 0, // disable 'flex:1' when hiding a View
  244. },
  245. loadingView: {
  246. flex: 1,
  247. justifyContent: 'center',
  248. alignItems: 'center',
  249. },
  250. loadingProgressBar: {
  251. height: 20,
  252. },
  253. });
  254. module.exports = WebView;