Reactjs 在react native中打开I帧

我正在react native中集成条带支付，希望在Button单击后打开一个带有特定url的iframe

场景：用户将输入卡的详细信息，详细信息将提供给api端点，它将返回一个url，该url将包含身份验证部分（如OTP）。所以我想打开那个url怎么做？让我看看是否有更好的方法来打开认证中间件

在下面添加代码

Payment.js


import React, { Component } from 'react';
import { View, Button } from 'react-native';
import stripe from 'tipsi-stripe';
import { doPayment } from '../api/api';
import { Auth } from './Auth';

stripe.setOptions({
  publishableKey: 'pk_test_********',
});

export default class Payment extends Component {
  state = {
    isPaymentPending: false
  }
  requestPayment = () => {
    this.setState({ isPaymentPending: true });
    return stripe
      .paymentRequestWithCardForm()
      .then(stripeTokenInfo => {
        return doPayment(10330, stripeTokenInfo.tokenId);
      })
      .then((res) => {
        let url = "<iFrame src='" + res.intent_url + "' />"
        console.log(res, url);
        openAuthentication(url);  --->>>> here i'm calling a function with url
      })
      .catch(error => {
        console.warn('Payment failed', { error });
      })
      .finally(() => {
        this.setState({ isPaymentPending: false });
      });
  };



  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Make a payment"
          onPress={this.requestPayment}
          disabled={this.state.isPaymentPending}
        />
      </View>
    );
  }
}

openAuthentication = (url) => {
  console.log("Here with props :::::::", url);
 // here I want to open an iframe, i'm getting correct url, I've checked it in a static html page and it is working
  <Auth url={url} />
}

const styles = {
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
};



Auth.js



import React, { Component } from 'react'
import {
  View, StyleSheet
} from 'react-native'
import { WebView } from 'react-native-webview'

export default class Auth extends Component {
  constructor(props) {
    super(props)
    console.log(props, ">>>>>>>>>>>")
  }
  render() {
    console.log("In Auth -----------");
    return (
      <View style={styles.container}>
        <WebView
          source={{ uri: 'myUrl' }}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

错误：

React.createElement类型无效，应为字符串或类/函数

Auth需要由呈现函数返回，否则不会显示任何内容

所以，你会想要类似的东西：

render() {
    return (
        <View style={styles.container}>
            <Button
                title="Make a payment"
                onPress={this.requestPayment}
                disabled={this.state.isPaymentPending}
            />

            {this.state.url && (
                <Auth url={this.state.url} />
            )}
        </View>
    );
}

及

---

您是否尝试过在Web视图中显示iFrame？我无法打开我的身份验证页。我已经添加了相同的代码。我已经记录了一些打印声明，但它不起作用。我在问题“你的答案有效”中添加了错误，我在身份验证屏幕中获取url，但无法在webview中打开iframe？你能帮我找到答案吗。您可以先尝试显示一些伪html字符串，而不是iFrame，以确保其工作，然后用iFrame替换它。谢谢你。

state = {
    isPaymentPending: false,
    url: undefined
}

.then((res) => {
    let url = "<iFrame src='" + res.intent_url + "' />";
    this.setState({ url });
})

render() {
    console.log("In Auth -----------");
    return (
        <View style={styles.container}>
            <WebView
                source={{ html: this.props.url }}
                originWhitelist={['*']}
            />
        </View>
    );
}