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

IT技术 javascript reactjs react-native webview create-react-app
2021-05-03 13:37:27

任何人都可以帮助我如何检测 React Native 中的 Webview 按钮单击事件吗？如下面的代码所示，我的 WebView (index.html) 中有一个 Button，我想从 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,
}
});

我的 index.html

<html>
<body>
    <Button>Click Here</Button>
</body>
</html>
2个回答

添加window.postMessage()到您的页面文件和onMessage={this.onMessage}React Native 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);
}

编辑：工作示例：

应用程序.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)} 
    />
  );
}

索引.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对于当前的最新版本对我不起作用。并找到了许多其他解决方案，这些解决方案可能适用于某些版本但不适用于我的人。

检查我如何解决它window.ReactNativeWebView.postMessage：

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

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

<WebView
    bounces={false}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    javaScriptEnabled={true}
    originWhitelist={['*']}
    source={{ html }}
    onLoadEnd={this.onLoadEnd}
    onError={this.onError}
    mixedContentMode={'never'} // security
    startInLoadingState={true} // when starting this component
    onMessage={onMessage}
    javaScriptEnabledAndroid={true}
/>

onMessage = (message: string) => {
    console.log('action result coming from the webview: ', message);
};

在html字符串中，我添加了下面的脚本并onclick为给定的 htmlbutton或a标签设置：

...
<div>
    <button onclick="clickYourButton([PASS SOME STRING DATA HERE])">Click</button>
</div>
...
<script type="text/javascript">
    function clickYourButton(data) {
        setTimeout(function () {
            window.ReactNativeWebView.postMessage(data)
        }, 0) // *** here ***
    }
</script>
  • 要传递给postMessagefunc 的数据应该是string
其它你可能感兴趣的问题
上一篇使用 Kubernetes 部署的 API 做出react，出现 cors 错误 下一篇使用同步电缆代替皮带有什么优点/缺点？