美文网首页
react-native与webview的通信

react-native与webview的通信

作者: sunny635533 | 来源:发表于2023-04-20 15:55 被阅读0次

    实现RN和webview互相发送文本通信
    html内容=>

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>启动测试</title>
    </head>
    
    <body>
      <p style="text-align: center">
        <button id="button">发送数据到react native</button>
      <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
      </p>
      <script>
        var data = 0;
        //webview发送内容到RN
        function sendData(data) {
          window.ReactNativeWebView.postMessage(data);
        }
    
        window.onload = function () {
          //ios的监听RN传递过来的事件
          window.addEventListener('message', function (e) {
            alert("==== e111 ====" + e.data)
            document.getElementById('data').textContent = e.data;
          });
          //android的监听RN传递过来的事件
          document.addEventListener('message', function (e) {
            alert("==== e2222 ====" + e.data)
            document.getElementById('data').textContent = e.data;
          });
    
    
          document.getElementById('button').onclick = function () {
            data += 100;
            sendData(data);
          }
        }
      </script>
    </body>
    
    </html>
    

    react-native的页面代码=>

    import React, { Component } from "react";
    import { Image, StyleSheet, Animated, Text, TextInput, TouchableOpacity, View, Platform } from "react-native";
    import WebView from "react-native-webview";
    export default class TestWebViewPage extends Component {
        webViewRef = React.createRef();
    
        constructor(props) {
            super(props);
            this.state = {
                webViewData: ""
            }
            this.data = 0;
        }
    
        sendMessage() {
            this.data += 1;
            this.webViewRef.current?.postMessage(JSON.stringify(this.data));
        }
    
        handleMessage(e) {
            console.log("==== handleMessage ==", e.nativeEvent.data)
            this.setState({ webViewData: e.nativeEvent.data });
        }
    
        render() {
            const injectedJavascript = "javascript:function deliverCode(data) { window.ReactNativeWebView.postMessage(data) };"
           
            const url = Platform.select({
                ios: require('../../../test.html'),
                android: { uri: "file:///android_asset/test.html" }
            })
    
            return <View style={{ flex: 1 }}>
                <NavBar>webview通信</NavBar>
                <View style={{ margin: 20 }}>
                    <UIButtonWithSingleText
                        textStyle={{ color: 'green' }}
                        text={"发送数据到webview"}
                        onPress={() => {
                            this.sendMessage()
                        }} />
                    <Text style={{ color: '#f00' }}>{this.state.webViewData}</Text>
                </View>
    
                <WebView
                    ref={this.webViewRef}
                    source={url}
                    style={{ flex: 1 }}
                    onMessage={(e) => {
                        this.handleMessage(e)
                    }}
                    injectedJavaScript={injectedJavascript}
                    startInLoadingState={true}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    scrollEnabled={false}
                    allowFileAccess={true}
                    androidHardwareAccelerationDisabled={true}
                    automaticallyAdjustContentInsets={true}
                    scalesPageToFit={Platform.OS !== "ios"}
                    originWhitelist={['*']}
                />
            </View>
        }
    
    }
    

    injectedJavascript 注入js代码测试,iOS可以用,但是android不行。

    相关文章

      网友评论

          本文标题:react-native与webview的通信

          本文链接:https://www.haomeiwen.com/subject/zgwrjdtx.html