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

Question

我正在尝试使用 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>

Answer 1

根据我在 WebView 文档中阅读的内容，为了将消息从 Web 传递到 React Native，您必须在 JavaScript 和 onMessage 中使用 postMessage React Native 中的道具：https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

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

Answer 2

我在最近的一个应用程序中遇到了同样的问题，其中 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

Answer 3

最后用不同的方法解决了。我使用了“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
 }

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

React Native Webview "onNavigationStateChange" returning empty document.title only on iOS device

webview

android-webview

reactjs

react-native

react-native-webview