如何在React Native中访问WebView中的React上下文？
在React Native中访问WebView中的React上下文可以通过以下步骤实现：
- 首先，确保你已经安装了React Native的WebView组件。你可以在React Native官方文档中找到WebView的安装和使用方法。
- 在React Native中，WebView组件提供了一个名为
onMessage的属性，它可以用来接收来自WebView的消息。 - 在WebView中，你可以使用JavaScript的
postMessage方法将消息发送给React Native。在WebView中，你可以通过以下方式发送消息： - 在WebView中，你可以使用JavaScript的
postMessage方法将消息发送给React Native。在WebView中，你可以通过以下方式发送消息： - 在React Native中，你可以通过在WebView的
onMessage属性上注册一个回调函数来接收来自WebView的消息。在这个回调函数中，你可以访问WebView中的React上下文。 - 在React Native中，你可以通过在WebView的
onMessage属性上注册一个回调函数来接收来自WebView的消息。在这个回调函数中，你可以访问WebView中的React上下文。 - 在这个回调函数中，
event.nativeEvent.data包含了来自WebView的消息。
通过以上步骤，你可以在React Native中访问WebView中的React上下文。你可以根据具体的需求在回调函数中执行相应的操作，例如更新React Native中的状态或执行其他逻辑。
腾讯云提供了一款名为Tencent X5 WebView的产品，它是基于腾讯浏览服务（TBS）内核的WebView组件，具有更好的性能和兼容性。你可以在腾讯云官方网站上找到Tencent X5 WebView的详细介绍和使用文档：Tencent X5 WebView。
相关·内容
5回答
React本机WebView onMessage什么也不做
javascript、html、react-native、webview
我正在尝试使用onMessage侦听器。该网站正在执行一个postMessage (window.postMessage("Post message from web");)，但是react本机的webview onMessage侦听器没有做任何事情！我不知道我做错了什么。
这是HTML
<script type="text/javascript">
window.postMessage("Post message from web");
</script>
下面是反应本机代码：
<WebView
r
浏览 14提问于2017-12-03得票数 15
回答已采纳
1回答
如何从WebView发送消息到React Native？
react-native
我已经成功地从React Native (RN)向WebView发送了一条消息。 我正在努力的是，把消息从WebView发回RN。没有显示错误-只是消息从未到达。 下面是我使用的代码： React Native代码 <WebView
source={Platform.OS === 'ios' ?
{ uri: RNFS.LibraryDirectoryPath + "/offlineplayer/index.html" } :
{ uri: 'file:///android_asset/offl
浏览 50提问于2020-04-10得票数 1
回答已采纳
2回答
window.postMessage不会将数据发送到OnMessage WebView
react-native、webview、postmessage
我已经在我的react本地组件中创建了一个webview，然后我想使用postMessage发送数据并通过OnMessage读取数据。我不知道问题到底出在我的postMessage还是我的webView的onMessage选项中。你能告诉我问题出在哪里吗？以下是我的应用程序组件： let Script1 = `
var data = {
message : "OnFocusEvent"
};
window.postMessage(JSON.stringify({data}),"*");
浏览 40提问于2018-12-21得票数 0
回答已采纳
1回答
从Webview获取和传递React Native中的变量
reactjs、react-native、webview
我在我的项目React Native中使用了react-native-webview。我的webview有一个javascript数组，我需要获取这个数组并在一个菜单中显示值，就像这个幻灯片菜单：https://raw.githubusercontent.com/instea/react-native-popup-menu/master/android.demo.gif 代码： function WebViewPage(){
const html = `
<html>
<body>
<d
浏览 43提问于2020-07-17得票数 2
回答已采纳
1回答
如何使用获得事后响应？
react-native、webview
我正在尝试从ReactiveNative中的WebView中提取POST响应，但是onMessage似乎并没有解决这个问题。下面的代码可以使用WebView导航网站，但它不使用console.log。在WebView文档中是否有我遗漏或误读的东西？
import { WebView } from "react-native-webview";
return (
<WebView
source={{
uri: `https://www.example.com/`
}}
onMessage={(event)=&g
浏览 2提问于2020-03-26得票数 1
3回答
React Native WebView onMessage和postMessage以获取所有网页
react-native、webview
我真的不清楚如何实现onMessage和postMessage，我可以得到整个网页，但只能从react原生。
我的意思是，我将使用injectedJavaScript注入这段代码
var markup = document.documentElement.innerHTML
window.postMessage(markup)
我将使用onMessage接收结果。有没有可能因为到目前为止我还不能这么做
浏览 0提问于2017-11-01得票数 3
2回答
React-本机webview onScroll侦听器
webview、react-native、listener
我一直在检查react-native文档，但似乎没有任何用于WebView组件的onScroll侦听器。有没有办法解决这个问题？这个想法是在webview滚动时隐藏UI组件，并在用户停止滚动或向下滚动时显示它们。
浏览 0提问于2017-05-02得票数 4
1回答
如何在webview内的web间进行通信以响应本地应用程序
javascript、react-native、webview
我是新来的反应本地人。
我需要在RN (RN到Web，然后Web回到RN)之间创建通信。
假设我在我的网络中有一个在网页视图中调用的项目列表。列表中的每个项目都可以被点击/点击。当我点击网页中项目列表中的一项时，我会将其重定向到“本地应用程序”页面，并显示实际项目的详细信息。
到目前为止，我所做的是:我可以从本机到Webview注入Javascript，如下所示：
<WebView
source={{uri: "myweb.com/webview.php"}}
injectedJavaScript={jsCode}
javaScriptEnabledAndro
浏览 0提问于2018-11-14得票数 5
回答已采纳
1回答
响应本地开放的本地共享
javascript、react-native
嗨，我正在使用react本机的webview来显示一些HTML。每当用户单击该HTML中的共享按钮时，我希望它打开共享本机
这有可能吗？
编辑1
# your app react-native
import {Share, WebView} from 'react-native'
nativeShare = async (data) => {
const shareOptions = {
message: data.message
}
if ('object' == typeof
浏览 0提问于2019-01-18得票数 1
回答已采纳
1回答
AWS Amplify Auth从React Native上的React Native Webview登录
react-native、amazon-cognito、aws-amplify、react-native-webview
我正在开发一个在webview中加载example.com的React Native应用程序。我想知道在React Native webview中使用postMessage将用户名和密码传递给React Native是否安全。你觉得还好还是不安全？
这是web应用程序(example.com)将用户名和密码发送到React Native
这是React Native <WebView onMessage={m => this._onMessage(m)} />，用于接收用户名和密码以验证用户身份。
它看起来会工作，但不确定它是否安全。如果没有，有没有办法从Reac
浏览 4提问于2020-05-07得票数 2
1回答
本机html postMessage无法到达WebView
javascript、html、webview、react-native、postmessage
我使用React来显示index.html，并且HTML将发布混乱到应用程序。然后，应用程序将接收消息并将其写入控制台。问题是，当postMessage立即在头上运行时，应用程序无法接收消息。我认为这可能与HTML未完成加载有关。然后，我在setTimeout上使用了一个延迟，它起了作用。
现在我想知道：
有没有更好的方法来解决这个问题？
为什么延迟100毫秒不能工作，而延迟200毫秒呢？
我使用的是React原生版本0.39.0和Node版本7.2.0。
下面是我到目前为止掌握的代码：
index.html
<head>
<title>Index<
浏览 1提问于2016-12-21得票数 9
2回答
react-native-webview this.webView.postMessage不工作
javascript、react-native、react-native-webview
以前的版本不起作用，因为它是新的。 "react-native-webview"："^9.0.2“"react-native"："0.62.0"， 2. webview options
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
startInLoadingState={true}
allowUniversalAccessFromFileURLs={true}
onMessage={this.respondToOnMessage}
3. react-
浏览 83提问于2020-04-03得票数 0
1回答
事件来自event.nativeEvent.data日志作为setImmediate$1
android、react-native
我正在尝试将令牌和其他用户详细信息从Webview应用程序传递到使用Webview( Web本机)的本机应用程序。
当我这么做
window.postMessage(JSON.stringify(reactNativeObj), '*');
并将事件记录在React本机应用程序中。
console.log( "On Message", event.nativeEvent.data );
它正在将日志打印为
On Message: setImmediate$0.4162155499933975$1
它应该打印我的对象。
我已经尝试了几乎所有的东西，并重新阅读了文档
浏览 22提问于2020-02-04得票数 0
2回答
获取WebView中脚本对react本机的事件响应
html、reactjs、react-native、webview
我正在使用html脚本来显示一些模块。一切都很完美，直到我没有收到eventHandler的任何响应。如何在Web视图中获得eventHandler的响应。我没有获得onSuccess、onError或onClose方法的任何日志。我使用的是react-native-webview。我尝试使用window.postMessage('onSuccess')；并在onMessage上获取值
this.khaltiUI = `<html>
<head>
<script src="https://khalti.
浏览 20提问于2019-11-15得票数 0
4回答
如何启运Discuz论坛？
开发者实验室
请描述您的问题
页面截图
[截图]
问题所在页面
标题：基于 CentOS 搭建 Discuz 论坛 - 腾讯云实验室
地址：https://cloud.tencent.com/developer/labs/lab/10030/console
浏览器信息
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063
浏览 1022提问于2017-10-12
5回答
我如何从WebView发送一条信息来响应本机？
react-native、react-native-webview
我已经成功地将一条消息从React发送到了WebView。
我正在苦苦挣扎的是，将消息从WebView返回给RN。没有出现错误--只是这条信息从来没有传达过。
下面是我使用的代码：
反应本机代码
<WebView
ref={webview => (this.webview = webview)}
source={{ uri: "http://www.my-web-site"}}
onLoadEnd={() => this.onLoadEnd()}
onMessage={this.onMessage}
cacheEnabled={false}
浏览 1提问于2019-06-24得票数 6
7回答
本机WebView postMessage不起作用
javascript、html、webview、react-native
我无法让本地人WebView postMessage去工作。receives成功地接收了来自web应用程序的post消息。但是web应用程序没有接收来自的消息。
我的简单网络应用程序
<html>
<body>
<button>Send post message from web</button>
<div>Post message log</div>
<textarea style="height: 50%; width: 100%;" readonly></textarea>
浏览 15提问于2016-12-15得票数 49
回答已采纳
2回答
React Native Webview with openlayers
javascript、reactjs、react-native、leaflet、openlayers-3
我看过这个信息：
同时，我正在使用OpenLayers开发一个使用react的web应用程序。我不得不在移动设备上使用原生的react制作同样的应用程序，但我不知道如何让它工作。
以下是我使用React +Openlayers编写web应用程序的代码：
import React, { Component } from 'react';
import './App.css';
// openlayers
import View from 'ol/view';
import Projection from 'ol/proj/projecti
浏览 6提问于2018-03-30得票数 22
1回答
如何使用react native监控webview文档标题更改
javascript、react-native、onchange
基本上，只要webview中的文档标题发生更改，我就会尝试在原生react中调用一个函数。通过使用以下代码，我已经获得了web视图中显示的网页的document.title：
handleMessage(message) {
alert(message.nativeEvent.data);
}
render() {
return (
<WebView
source={{ uri: "https://website.com/" }}
injectedJavaScript="window.pos
浏览 2提问于2018-08-16得票数 0
回答已采纳
1回答
如何在react-native中获取设置在webview中的cookie？
react-native、react-native-ios、react-native-webview、react-native-cookies
我正在尝试检索用户输入的邮政编码，这是添加到cookie中的网页视图。我怎么才能得到它？我已经尝试过react-native-cookies，它得到一个空对象。 import CookieManager from 'react-native-cookies';
componentWillMount() {
CookieManager.get('https://www.example.com')
.then((res) => {
console.log('CookieManager.get from webkit-vi
浏览 72提问于2019-06-06得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
