Javascript 在React Native中检测WebView中的按钮单击_Javascript_Reactjs_React Native_Webview_Create React App

Javascript 在React Native中检测WebView中的按钮单击

javascript reactjs react-native webview

Javascript 在React Native中检测WebView中的按钮单击,javascript,reactjs,react-native,webview,create-react-app,Javascript,Reactjs,React Native,Webview,Create React App,有谁能帮助我在React Native中检测Webview按钮单击事件吗？如下面的代码所示，我在我的WebView（index.html）中有一个按钮，我想从React Native中检测单击事件并执行onClick方法。我尝试过多种方法，但都没有成功。非常感谢我的MyApp.js import React from 'react'; import { AppRegistry, View, WebView, StyleSheet} from 'react-native' export def

有谁能帮助我在React Native中检测Webview按钮单击事件吗？如下面的代码所示，我在我的WebView（index.html）中有一个按钮，我想从React Native中检测单击事件并执行onClick方法。我尝试过多种方法，但都没有成功。非常感谢

我的MyApp.js

import React from 'react';
import { AppRegistry, View, WebView, StyleSheet} from 'react-native'

export default class MyApp extends React.Component {
onClick = () => {
  console.log('Button Clicked');
}
render() {
    return (
        <View style={styles.container}>
            <WebView
                style={styles.webView}
                source={require('./index.html')}/>
        </View>
    );
}
};

let styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#fff',
},
webView: {
    backgroundColor: '#fff',
    height: 350,
}
});

从“React”导入React；
从“react native”导入{AppRegistry，View，WebView，StyleSheet}
导出默认类MyApp扩展React.Component{
onClick=（）=>{
log（“单击按钮”）；
}
render（）{
返回(
);
}
};
让styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
},
网络视图：{
背景颜色：“#fff”，
身高：350，
}
});

my index.html

<html>
<body>
    <Button>Click Here</Button>
</body>
</html>

<button>Send post message from web</button>

<script>
document.querySelector("button").onclick = function() {
  console.log("Send post message");
  window.postMessage("Hello React", "*");
}
</script>


点击这里

将

window.postMessage（）

添加到页面文件中，并将

onMessage={this.onMessage}

添加到React原生WebView组件中

例如：

// index.html (Web)
...
<script>
  window.postMessage("Sending data from WebView");
</script>
...


// MyWebView.js (React Native)
<WebView>
...
<WebView
   ref="webview"
    onMessage={this.onMessage}
/>
  
onMessage(data) {
  //Prints out data that was passed.
  console.log(data);
}

//index.html（Web）
...
window.postMessage（“从WebView发送数据”）；
...
//MyWebView.js（反应本机）
...
onMessage（数据）{
//打印传递的数据。
控制台日志（数据）；
}

编辑：工作示例：

App.js

onMessage(m) {
 alert(m.nativeEvent.data);
}
render() {
  return(
    <WebView
      style={{ flex: 1 }}
      source={{uri: 'http://127.0.0.1:8877'}} //my localhost
      onMessage={m => this.onMessage(m)} 
    />
  );
}

onMessage（m）{
警报（m.nativeEvent.data）；
}
render（）{
返回(
this.onMessage（m）}
/>
);
}

index.html

<html>
<body>
    <Button>Click Here</Button>
</body>
</html>

<button>Send post message from web</button>

<script>
document.querySelector("button").onclick = function() {
  console.log("Send post message");
  window.postMessage("Hello React", "*");
}
</script>

从web发送邮件
document.querySelector（“按钮”）.onclick=function（）{
console.log（“发送邮件”）；
postMessage（“Hello React”，“*”）；
}

希望它能帮助我打开窗口。对于当前的最新版本，postMessage不适用于我。并找到了许多其他的解决方案，可能在某些版本中对某人有效，但对我无效

检查如何使用

window.ReactNativeWebView.postMessage解决此问题

：

"react": "16.13.1",
"react-native": "0.63.3",
"react-native-webview": "^11.0.2",

注意：我使用的是html字符串而不是url

onMessage=（消息：字符串）=>{
log（'来自webview的操作结果：'，消息）；
};

在

html

字符串中，我添加了下面的脚本，并为给定的html

按钮或a
标记设置onclick
：
。。。
点击
...
功能点击按钮（数据）{
setTimeout（函数（）{
window.ReactNativeWebView.postMessage（数据）
}，0）/***此处***
}


要传递到postMessage
func的数据应为string
类型
非常感谢您对此做出回应，我也尝试过，但运气不佳。你是否可以举一个有效的例子。我会非常感激的。