React Native Webview“onNavigationStateChange”仅在 iOS 设备上返回空 document.title

问题描述 投票:0回答:4

我正在尝试使用 Paypal 创建付款结账流程,并使用 WebView 处理 ExpressJS 后端的请求。 React Native应用程序读取后端渲染的html的document.title来确定事务的成功或失败。在 Android 上它工作得很好,但是在 iOS 上 document.title 总是返回为“”。

反应本机部分:

const INJECTED_JAVASCRIPT =
    `document.getElementById('total').value="${total}"; 
    document.getElementById('address').value="${address}"; 
    document.getElementById('firstName').value="${userProfile.firstName}";
    document.getElementById('lastName').value="${userProfile.lastName}";
    document.getElementById('email').value="${accessStore.auth.userEmail}";
    document.getElementById('addressDetails').value="${moreDetails}";
    setTimeout(function() {document.f1.submit()}, 1000);`
    
    
<WebView
     source={{uri: process.env.BACKEND_NODE_URL_PAYMENT}}
     onNavigationStateChange={(data) => {
         handleResponse(data), console.log(data)
     }}
     onMessage={(event) => {}}
     injectedJavaScript={INJECTED_JAVASCRIPT}
/>

快递部分

app.get('/success', (req, res) => {

    var PayerID = req.query.PayerID;

    var execute_payment_json = {
         "payer_id": PayerID,
    };

    var paymentId = req.query.paymentId;

    paypal.payment.execute(paymentId, execute_payment_json, function (error, payment)
    {
         if (error) {
              console.log(error.response);
              throw error;
         } else {
             res.render('success');
         }
    });
});

在 Express JS 中渲染 HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>success</title>
</head>
<body>
<h1>Zahlung erfolgreich!</h1>
</body>
</html>
reactjs react-native webview android-webview react-native-webview
4个回答
5
投票

我使用了web视图的

onLoadProgress
属性,通过
e.nativeEvent
获取URL:

 onLoadProgress = {e => {
      let {url} = e?.nativeEvent;
}}

1
投票

最终用不同的方法解决了。我使用了“url”值并在条件 as 中使用了它

 if (data.url.includes('https://example.com/success')) {
     ///do if payment successfull
 }
 
 if (data.url.includes('https://example.com/cencel')) {
     ///do if payment is cancelled
 }

0
投票

根据我在 WebView 文档中读到的内容,为了将消息从 Web 传递到 React Native,您必须在 JavaScript 中使用

postMessage
,并在 React Native 中使用
onMessage
属性:https://github。 com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating- Between-js-and-native

这意味着理论上你的代码即使在 Android 上也不应该工作,所以你肯定有一个有趣的用例!


0
投票

我在最近的一个应用程序中遇到了同样的问题,其中 html 是从 React-native 的后端处理的,
请原谅它不是 webview

我使用

react-native-render-html
包来渲染从后端收集的 html

import { View, Text } from 'react-native'
import React from 'react'
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const ComponentHTML = ({body}) => {
 // body is the props sent down from parent as response of - api call
  const { width } = useWindowDimensions();
  const source_ = {html: `${body}`};
return (
   <View style={styles.announceMentView}>
    <RenderHtml
      contentWidth={width}
      source={source_}
   />
  </View>
 )
}
export default ComponentHTML
© www.soinside.com 2019 - 2024. All rights reserved.