问题标签 [react-native-webview]

我目前正在为工作构建的应用程序主要集中在显示文章上。其中一些包含 Twitter 嵌入（在网络版本上），由于 API 由我们的两个应用程序共享，我也收到了 HTML 嵌入。每当我尝试在源设置为 HTML 和 Twitter JS 脚本以进行样式设置的 WebView 中显示推文时，页面要么正确加载，但在我按下返回（使用 react-navigation）时崩溃，或者它只是在加载时崩溃但仅打开安卓。

我尝试了以下方法：

• 使用社区支持的 WebView包而不是内置的包。我也在那里打开了一个问题。

• 从 WebView 中删除 JS 脚本。

• 改用injectedJavaScript道具。

• 安装 TwitterKit 以使用本机嵌入，不幸的是 Twitter 不再支持 :(

这就是我呈现 WebView 的方式：

这是来自 Android Studio 的堆栈跟踪（我什至没有得到 RedBox，只是一个普通的旧硬崩溃）。

FushionChartevents道具似乎无法在react-native-fusioncharts. 只有事件对象中的第一个键（键值对）会触发/发射。

在下面的示例中，console.log("bI");将记录，但不会记录任何其他事件。甚至onInitialized因为它取决于renderComplete事件。

但是如果我们注释掉beforeInitialize事件，下一个事件就会起作用，依此类推。 只有当我们不发送道具或传递空对象onInitialized时，事件才会起作用。events

更新

仅在 iOS 中出现，在 Android 中运行良好。

更新 2

检查此博客中的第 2 点，在“3.onMessage/postMessage”下。

问题是在 iOS 中进行连续的 window.postMessage 调用将导致您的第一次调用丢失，因为每次在传递消息之前都会覆盖 url，因此最后一次调用会获胜

方案 1

方案 2

版本：：
react-native0.59.4
react-native-webview：5.8.1
fusioncharts：3.13.5
react-native-fusioncharts：3.0.0

根据我的经验， react-native-webview很难在 iOS 上按我想要的方式运行。当显示键盘并且其内容被键盘隐藏时，它不会自动更改其高度。

它的行为也很奇怪，被KeyboardAvoidingView包裹了。就我而言，它似乎将 WebView 的内容调整得太多，大约是键盘高度的两倍。当我手动监听键盘打开/关闭事件并相应地调整 WebView 的高度时，出现了同样的行为：

我找到了一个解决方案，不是最优的，但也是一个解决方案。我的答案贴在下面。

我正在使用react-native-webview并尝试将消息从 JavaScript 发布到 RN。

我正在使用该window.ReactNativeWebView.postMessage()方法，但无法解决ReactNativeWebView无法识别的问题，并出现以下错误：

我正在使用以下内容：

• “反应”：“16.8.3”，
• “反应原生”：“0.59.8”，
• "react-native-webview": "^5.12.0",

这看起来很简单，所以我不知道我要去哪里错了。

错误描述： 第一次打开我的应用程序时，网站在 WebView 中正确加载。然后我转到主屏幕，过了一会儿我返回应用程序并收到以下错误：

有没有人见过这个错误？

这是来自 Android Studio 的一些日志，它们可能相关/有用，也可能不相关。

重现： 我只能在发布中重现此错误 - 而不是在调试中。此错误发生在第一次加载应用程序后，然后离开它并在几个小时后返回应用程序。也许它与缓存有关。

当我强制退出应用程序时，问题仍然存在。如果我重新安装该应用程序，它可以工作一段时间。

预期行为： 网站应完全加载。

截图/视频：

环境： - 操作系统：Android（华为 P20 Pro 和其他多款 Android 手机） - 操作系统版本：Android 8 - react-native 版本：59.3 - react-native-webview 版本：5.6.2

我已经成功地将消息从 React Native (RN) 发送到 WebView。

我正在努力解决的问题是将消息从 WebView 传回给 RN。没有显示错误 - 只是消息永远不会通过。

这是我正在使用的代码：

反应本机代码

网页查看代码

我正在使用设置为的bottomTabNavigator。对于屏幕，我呈现react-native-webview。正在调用渲染函数，因为我可以看到 console.log 但实际的 webview 直到选项卡变为活动状态才开始加载。我开始的选项卡立即开始加载。lazyfalse

标签

航海家

这发生在react-navigation从 1.x 升级到 3.x 并升级react-native和react-native-webview. 我希望 webview 立即开始加载，而不仅仅是在可见时。

我正在尝试在需要身份验证的反应本机 Web 视图中加载 asp.net 应用程序。用户已经登录到移动应用程序，并且我在存储中保存了身份验证 cookie。我正在寻找一种方法将此身份验证 cookie 传递到我的 asp.net 页面，以响应本机 Web 视图以自动对用户进行身份验证，而无需再次登录。我希望为 web 视图中加载的 asp.net 应用程序的每个后续请求发送 cookie。请指教。谢谢

I have a React Native app in which at some page I've got a web view (react-native-webview) for displaying PDFs from our server.

In iOS everything works fine, in Android, whenever I try to view the file I got:

Cannot downoad files as permission was denined. Please provide permission to write to storage, in order to download files.

I've then added <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> to my manifest. Now, I'm getting the following alert:

I think it's pretty scary and very stupid from a user experience perspective. I'm not accessing photos, media, or files, all I'm trying to do is to display a simple PDF inside a web view. I don't want my users to be presented such alert.

When I tap allow, it says Downloading... and downloads the PDF like a file that can be opened outside my app. I don't want this behavior, I want PDF to render inside web view just like iOS does.

How can I display PDFs in Android using React Native web view, without a scary dialog which has nothing to do with what I'm actually trying to do?

(I'm on React Native 0.59.9, Android 8.1, Android SDK 28, react-native-web-view 5.12.0)

在我的 react native expo 应用程序中，我有两个屏幕，

一个用于登录页面，用户将在其中放置凭据，成功登录后，它将被重定向到 webview 页面。

在网页内部，我正在尝试获取主页内容，但它被重定向到ios. 但是在android中使用后domStorageEnabled={true}我得到了主页。

如何仅使用应用程序登录而不从索引页面登录（网页登录）获取主页？请提供解决方案。

提前致谢。