zoukankan      html  css  js  c++  java
  • WebView JS与RN进行通讯

    RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间最终却是另一作者提交了该功能的官方版本。言归正转,由于Web的需求丰富多样所以如果不能实现WebView里的JS与RN的通讯的话,就显得特别不方便,下面代码示例如何获取当前的WebView Title,(实时Title,第一次加载的标题RN有Nativestate的方式获取,但如果Title被动态变更的话通过该办法就获取不了)。

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      WebView,
      Button,
    } from 'react-native';
    
    export default class RN37 extends Component {
      webview = null;
      //执行JS代码,会被转为字符串,使用injectedJavaScript方法用eval执行字符串方法
      postMessage = () => {
        if (this.webview) {
          this.webview.postMessage('window.postMessage("Title:"+document.title);');
        }
      }
    
      //接收WebView JS事件消息
      onMessage = e => {
        alert(e.nativeEvent.data);
      }
    
      render() {
        return (
          <View style={styles.container}>
            <Button enabled onPress={this.postMessage} title="Send Message to Web View" />
            <WebView
              ref={webview => { this.webview = webview; } }
              style={{
                flex: 1,
                360,
              }}
              injectedJavaScript="document.addEventListener('message', function(e) {eval(e.data);});"
              source={{uri:"https://www.baidu.com"}}
              onMessage={this.onMessage}
              />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      }
    });
    
    AppRegistry.registerComponent('RN37', () => RN37);

    执行效果

  • 相关阅读:
    点击按钮生成遮罩层后这个按钮被遮住还可以点击解决办法
    关于jq的load不用回调获取其中dom元素方法
    移动端默认返回按键,使用h5+修改默认事件
    移动端解决input focus后键盘弹出,高度被挤压的问题
    模拟移动端上拉超过页面实际高度
    软工作业
    一周进度汇报
    alhpa阶段回顾
    一周进度汇报
    一周进度汇报
  • 原文地址:https://www.cnblogs.com/cbcye/p/6081682.html
Copyright © 2011-2022 走看看