123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701 |
-
-
- 'use strict';
-
- import React from 'react';
- import PropTypes from 'prop-types';
-
- import ReactNative from 'react-native'
- import {
- ActivityIndicator,
- EdgeInsetsPropType,
- Linking,
- StyleSheet,
- Text,
- UIManager,
- View,
- ViewPropTypes,
- requireNativeComponent,
- NativeModules,
- Image
- } from 'react-native';
-
- import invariant from 'fbjs/lib/invariant';
- import keyMirror from 'fbjs/lib/keyMirror';
-
- import deprecatedPropType from 'deprecated-prop-type';
-
- import WebViewShared from './WebViewShared';
-
- const resolveAssetSource = Image.resolveAssetSource;
-
-
- function processDecelerationRate(decelerationRate) {
- if (decelerationRate === 'normal') {
- decelerationRate = 0.998;
- } else if (decelerationRate === 'fast') {
- decelerationRate = 0.99;
- }
- return decelerationRate;
- }
-
-
- const RNCWebViewManager = NativeModules.WebViewManager;
-
- const BGWASH = 'rgba(255,255,255,0.8)';
- const RCT_WEBVIEW_REF = 'webview';
-
- const WebViewState = keyMirror({
- IDLE: null,
- LOADING: null,
- ERROR: null,
- });
-
- const NavigationType = keyMirror({
- click: true,
- formsubmit: true,
- backforward: true,
- reload: true,
- formresubmit: true,
- other: true,
- });
-
- const JSNavigationScheme = 'react-js-navigation';
-
-
-
-
-
-
-
-
-
- const DataDetectorTypes = [
- 'phoneNumber',
- 'link',
- 'address',
- 'calendarEvent',
- 'none',
- 'all',
- ];
-
- const defaultRenderLoading = () => (
- <View style={styles.loadingView}>
- <ActivityIndicator />
- </View>
- );
- const defaultRenderError = (errorDomain, errorCode, errorDesc) => (
- <View style={styles.errorContainer}>
- <Text style={styles.errorTextTitle}>Error loading page</Text>
- <Text style={styles.errorText}>{'Domain: ' + errorDomain}</Text>
- <Text style={styles.errorText}>{'Error Code: ' + errorCode}</Text>
- <Text style={styles.errorText}>{'Description: ' + errorDesc}</Text>
- </View>
- );
-
-
- class WebView extends React.Component {
- static JSNavigationScheme = JSNavigationScheme;
- static NavigationType = NavigationType;
- static propTypes = {
- ...ViewPropTypes,
-
- html: deprecatedPropType(
- PropTypes.string,
- 'Use the `source` prop instead.',
- ),
-
- url: deprecatedPropType(PropTypes.string, 'Use the `source` prop instead.'),
-
-
-
- source: PropTypes.oneOfType([
- PropTypes.shape({
-
-
- uri: PropTypes.string,
-
-
- method: PropTypes.string,
-
-
- headers: PropTypes.object,
-
-
- body: PropTypes.string,
- }),
- PropTypes.shape({
-
-
- html: PropTypes.string,
-
-
- baseUrl: PropTypes.string,
- }),
-
-
- PropTypes.number,
- ]),
-
-
-
- renderError: PropTypes.func,
-
-
- renderLoading: PropTypes.func,
-
-
- onLoad: PropTypes.func,
-
-
- onLoadEnd: PropTypes.func,
-
-
- onLoadStart: PropTypes.func,
-
-
- onError: PropTypes.func,
-
-
- bounces: PropTypes.bool,
-
-
- decelerationRate: PropTypes.oneOfType([
- PropTypes.oneOf(['fast', 'normal']),
- PropTypes.number,
- ]),
-
-
- scrollEnabled: PropTypes.bool,
-
-
- automaticallyAdjustContentInsets: PropTypes.bool,
-
-
- contentInset: EdgeInsetsPropType,
-
-
- onNavigationStateChange: PropTypes.func,
-
-
- onMessage: PropTypes.func,
-
-
- startInLoadingState: PropTypes.bool,
-
-
- style: ViewPropTypes.style,
-
-
-
- dataDetectorTypes: PropTypes.oneOfType([
- PropTypes.oneOf(DataDetectorTypes),
- PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)),
- ]),
-
-
-
- javaScriptEnabled: PropTypes.bool,
-
-
-
- thirdPartyCookiesEnabled: PropTypes.bool,
-
-
-
- domStorageEnabled: PropTypes.bool,
-
-
-
- injectedJavaScript: PropTypes.string,
-
-
-
- userAgent: PropTypes.string,
-
-
-
- scalesPageToFit: PropTypes.bool,
-
-
-
- onShouldStartLoadWithRequest: PropTypes.func,
-
-
-
- allowsInlineMediaPlayback: PropTypes.bool,
-
-
-
- mediaPlaybackRequiresUserAction: PropTypes.bool,
-
-
-
- originWhitelist: PropTypes.arrayOf(PropTypes.string),
-
-
-
- injectJavaScript: PropTypes.func,
-
-
-
- mixedContentMode: PropTypes.oneOf(['never', 'always', 'compatibility']),
-
-
-
- nativeConfig: PropTypes.shape({
-
-
- component: PropTypes.any,
-
-
- props: PropTypes.object,
-
-
- viewManager: PropTypes.object,
- }),
- };
-
- static defaultProps = {
- originWhitelist: WebViewShared.defaultOriginWhitelist,
- scalesPageToFit: true,
- };
-
- state = {
- viewState: WebViewState.IDLE,
- lastErrorEvent: null,
- startInLoadingState: true,
- };
-
- UNSAFE_componentWillMount() {
- if (this.props.startInLoadingState) {
- this.setState({ viewState: WebViewState.LOADING });
- }
- }
-
- render() {
- let otherView = null;
-
- if (this.state.viewState === WebViewState.LOADING) {
- otherView = (this.props.renderLoading || defaultRenderLoading)();
- } else if (this.state.viewState === WebViewState.ERROR) {
- const errorEvent = this.state.lastErrorEvent;
- invariant(errorEvent != null, 'lastErrorEvent expected to be non-null');
- otherView = (this.props.renderError || defaultRenderError)(
- errorEvent.domain,
- errorEvent.code,
- errorEvent.description,
- );
- } else if (this.state.viewState !== WebViewState.IDLE) {
- console.error(
- 'RNCWebView invalid state encountered: ' + this.state.loading,
- );
- }
-
- const webViewStyles = [styles.container, styles.webView, this.props.style];
- if (
- this.state.viewState === WebViewState.LOADING ||
- this.state.viewState === WebViewState.ERROR
- ) {
-
- webViewStyles.push(styles.hidden);
- }
-
- const nativeConfig = this.props.nativeConfig || {};
-
- const viewManager = nativeConfig.viewManager || RNCWebViewManager;
-
- const compiledWhitelist = (this.props.originWhitelist || []).map(
- WebViewShared.originWhitelistToRegex,
- );
- const onShouldStartLoadWithRequest = (event) => {
- let shouldStart = true;
- const { url } = event.nativeEvent;
- const origin = WebViewShared.extractOrigin(url);
- const passesWhitelist = compiledWhitelist.some(x =>
- new RegExp(x).test(origin),
- );
- shouldStart = shouldStart && passesWhitelist;
- if (!passesWhitelist) {
- Linking.openURL(url);
- }
- if (this.props.onShouldStartLoadWithRequest) {
- shouldStart =
- shouldStart &&
- this.props.onShouldStartLoadWithRequest(event.nativeEvent);
- }
- viewManager.startLoadWithResult(
- !!shouldStart,
- event.nativeEvent.lockIdentifier,
- );
- };
-
- const decelerationRate = processDecelerationRate(
- this.props.decelerationRate,
- );
-
- const source = this.props.source || {};
- if (this.props.html) {
- source.html = this.props.html;
- } else if (this.props.url) {
- source.uri = this.props.url;
- }
-
- const messagingEnabled = typeof this.props.onMessage === 'function';
-
- const NativeWebView = nativeConfig.component || RNCWebView;
-
- const webView = (
- <NativeWebView
- ref={RCT_WEBVIEW_REF}
- key="webViewKey"
- style={webViewStyles}
- source={resolveAssetSource(source)}
- injectedJavaScript={this.props.injectedJavaScript}
- bounces={this.props.bounces}
- scrollEnabled={this.props.scrollEnabled}
- decelerationRate={decelerationRate}
- contentInset={this.props.contentInset}
- automaticallyAdjustContentInsets={
- this.props.automaticallyAdjustContentInsets
- }
- onLoadingStart={this._onLoadingStart}
- onLoadingFinish={this._onLoadingFinish}
- onLoadingError={this._onLoadingError}
- messagingEnabled={messagingEnabled}
- onMessage={this._onMessage}
- onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
- scalesPageToFit={this.props.scalesPageToFit}
- allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
- mediaPlaybackRequiresUserAction={
- this.props.mediaPlaybackRequiresUserAction
- }
- dataDetectorTypes={this.props.dataDetectorTypes}
- {...nativeConfig.props}
- />
- );
-
- return (
- <View style={styles.container}>
- {webView}
- {otherView}
- </View>
- );
- }
-
- /**
- * Go forward one page in the web view's history.
- */
- goForward = () => {
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.goForward,
- null,
- );
- };
-
- /**
- * Go back one page in the web view's history.
- */
- goBack = () => {
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.goBack,
- null,
- );
- };
-
- /**
- * Reloads the current page.
- */
- reload = () => {
- this.setState({ viewState: WebViewState.LOADING });
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.reload,
- null,
- );
- };
-
- /**
- * Stop loading the current page.
- */
- stopLoading = () => {
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.stopLoading,
- null,
- );
- };
-
- /**
- * Posts a message to the web view, which will emit a `message` event.
- * Accepts one argument, `data`, which must be a string.
- *
- * In your webview, you'll need to something like the following.
- *
- * ```js
- * document.addEventListener('message', e => { document.title = e.data; });
- * ```
- */
- postMessage = data => {
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.postMessage,
- [String(data)],
- );
- };
-
- /**
- * Injects a javascript string into the referenced WebView. Deliberately does not
- * return a response because using eval() to return a response breaks this method
- * on pages with a Content Security Policy that disallows eval(). If you need that
- * functionality, look into postMessage/onMessage.
- */
- injectJavaScript = data => {
- UIManager.dispatchViewManagerCommand(
- this.getWebViewHandle(),
- UIManager.RNCWebView.Commands.injectJavaScript,
- [data],
- );
- };
-
- /**
- * We return an event with a bunch of fields including:
- * url, title, loading, canGoBack, canGoForward
- */
- _updateNavigationState = (event) => {
- if (this.props.onNavigationStateChange) {
- this.props.onNavigationStateChange(event.nativeEvent);
- }
- };
-
- /**
- * Returns the native `WebView` node.
- */
- getWebViewHandle = () => {
- return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
- };
-
- _onLoadingStart = (event) => {
- const onLoadStart = this.props.onLoadStart;
- onLoadStart && onLoadStart(event);
- this._updateNavigationState(event);
- };
-
- _onLoadingError = (event) => {
- event.persist(); // persist this event because we need to store it
- const { onError, onLoadEnd } = this.props;
- onError && onError(event);
- onLoadEnd && onLoadEnd(event);
- console.warn('Encountered an error loading page', event.nativeEvent);
-
- this.setState({
- lastErrorEvent: event.nativeEvent,
- viewState: WebViewState.ERROR,
- });
- };
-
- _onLoadingFinish = (event) => {
- const { onLoad, onLoadEnd } = this.props;
- onLoad && onLoad(event);
- onLoadEnd && onLoadEnd(event);
- this.setState({
- viewState: WebViewState.IDLE,
- });
- this._updateNavigationState(event);
- };
-
- _onMessage = (event) => {
- const { onMessage } = this.props;
- onMessage && onMessage(event);
- };
- }
-
- const RNCWebView = requireNativeComponent('RNCWebView');
-
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- errorContainer: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: BGWASH,
- },
- errorText: {
- fontSize: 14,
- textAlign: 'center',
- marginBottom: 2,
- },
- errorTextTitle: {
- fontSize: 15,
- fontWeight: '500',
- marginBottom: 10,
- },
- hidden: {
- height: 0,
- flex: 0, // disable 'flex:1' when hiding a View
- },
- loadingView: {
- backgroundColor: BGWASH,
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- height: 100,
- },
- webView: {
- backgroundColor: '#ffffff',
- },
- });
-
- module.exports = WebView;
|