我正在尝试使用 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>
我使用了web视图的
onLoadProgresse.nativeEvent onLoadProgress = {e => {
let {url} = e?.nativeEvent;
}}
最终用不同的方法解决了。我使用了“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
}
根据我在 WebView 文档中读到的内容，为了将消息从 Web 传递到 React Native，您必须在 JavaScript 中使用
postMessageonMessage这意味着理论上你的代码即使在 Android 上也不应该工作，所以你肯定有一个有趣的用例！
我在最近的一个应用程序中遇到了同样的问题，其中 html 是从 React-native 的后端处理的，
请原谅它不是 webview
我使用
react-native-render-htmlimport { 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