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

【问题标题】：React Native Webview "onNavigationStateChange" returning empty document.title only on iOS deviceReact Native Webview“onNavigationStateChange”仅在iOS设备上返回空document.title
【发布时间】：2022-06-13 05:56:08
【问题描述】：

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

【问题讨论】：

看起来你可能还需要一个参考，根据这个 GitHub 问题评论：github.com/react-native-webview/react-native-webview/issues/…
我尝试添加但仍然无法正常工作:(
这可能是一个错误。它曾经可以工作，但我现在遇到了同样的问题。使用 react-native-webview 11.15 和 11.17 测试。我不知道哪个版本有效。甚至可能是 iOS 15 引入了这个问题。
是的，老实说，没有具体的解决方案。我最终通过使用 .includes() 和 URL 值来解决它

标签： reactjs react-native webview android-webview react-native-webview

【解决方案1】：

我使用web视图的onLoadProgress属性通过e.nativeEvent获取URL：

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

【讨论】：

【解决方案2】：

根据我在 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 上也不应该工作，所以你肯定有一个有趣的用例！

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：