Question

我不明白为什么我的WebView不显示任何内容。我尝试添加 flex：1 ，正如我在Stackoverflow上看到的一些问题上看到的那样，但是它什么也没显示。

可能是由于此错误：

可能的无法处理的承诺拒绝（id：0）：错误：无法打开URL

我猜我的WebView的源是错误的。

我的错误在哪里？

import React, { Component } from 'react';
import { WebView, Platform, View, ViewPropTypes } from 'react-native';
import { PropTypes } from 'prop-types';

class StripeCheckout extends Component {
  onPaymentSuccess = (token) => {
  // Backend
}

onClose = () => {
  //Go To OtherScreen
}
  render() {
    const {
      publicKey,
      amount,
      allowRememberMe,
      currency,
      description,
      imageUrl,
      storeName,
      prepopulatedEmail,
      style,
      onPaymentSuccess,
      onClose
    } = this.props;




    const jsCode = `(function() {
                    var originalPostMessage = window.postMessage;
                    var patchedPostMessage = function(message, targetOrigin, transfer) {
                      originalPostMessage(message, targetOrigin, transfer);
                    };
                    patchedPostMessage.toString = function() {
                      return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
                    };
                    window.postMessage = patchedPostMessage;
                  })();`;
    return (
      <WebView
        javaScriptEnabled={true}
        scrollEnabled={false}
        bounces={false}
        injectedJavaScript={jsCode}
        source={{ html: `<script src="https://checkout.stripe.com/checkout.js"></script>
            <script>
            var handler = StripeCheckout.configure({
              key: '${publicKey}',
              image: '${imageUrl}',
              locale: 'auto',
              token: function(token) {
                window.postMessage(token.id, token.id);
              },
            });
            window.onload = function() {
              handler.open({
                image: '${imageUrl}',
                name: '${storeName}',
                description: '${description}',
                amount: ${amount},
                currency: '${currency}',
                allowRememberMe: ${allowRememberMe},
                email: '${prepopulatedEmail}',
                closed: function() {
                  window.postMessage("WINDOW_CLOSED", "*");
                }
              });
            };
            </script>`, baseUrl: ''}}
        onMessage={event => event.nativeEvent.data === 'WINDOW_CLOSED' ? onClose() : onPaymentSuccess(event.nativeEvent.data)}
        style={[{ flex: 1 }, style]}
        scalesPageToFit={Platform.OS === 'android'}
      />
    );
  }
}

StripeCheckout.propTypes = {
  publicKey: PropTypes.string.isRequired,
  amount: PropTypes.number.isRequired,
  imageUrl: PropTypes.string.isRequired,
  storeName: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  allowRememberMe: PropTypes.bool.isRequired,
  onPaymentSuccess: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  currency: PropTypes.string,
  prepopulatedEmail: PropTypes.string,
  style: ViewPropTypes.style
};

StripeCheckout.defaultProps = {
  prepopulatedEmail: '',
  currency: 'USD',
    };

export default StripeCheckout;

希望有人可以提供帮助

亲切的问候

Answer 1

将originWhitelist={['*']}添加到WebView中可以解决我的问题。

希望有帮助

WebView不显示任何内容-可能的未处理拒绝ID：0-WebView源

1 个答案: