在 React Native 中检测来自 WebView 的按钮点击答案

【问题标题】：Detect button click from WebView in React Native在 React Native 中检测来自 WebView 的按钮点击
【发布时间】：2018-06-04 19:34:54
【问题描述】：

谁能帮我解决如何在 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>

【问题讨论】：

标签： javascript reactjs react-native webview create-react-app

【解决方案1】：

将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);
}

编辑：工作示例：

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)} 
    />
  );
}

index.html

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

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

希望对你有帮助

【讨论】：

非常感谢您对此的回复，我也尝试过，但没有运气。是否有可能为您提供一个工作示例。我真的很感激。
stackoverflow.com/a/57227576/9673374 请检查此线程以了解与最新版本的兼容性

【解决方案2】：

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 字符串中，我添加了下面的脚本并为给定的html 设置onclick button 或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>

要传递给postMessage func 的数据应该是string

【讨论】：