热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

reactnativeandroid手机webview加载html不显示

react-nativeandroid手机webview加载html不显示,Go语言社区,Golang程序员人脉社

最近遇到个问题就是webview引用的html做的地图,但是Android上面不显示页面:

    原因:Android 需要先把静态资源放到 android/app/src/main/assets 目录下面(要自己新建assets目录),

            然后把 require('./base/ImportantMap/map.html')换成 {uri: 'file:///android_asset/base/ImportantMap/map.html'}

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

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            webViewData:this.props.data
        }
    }
    //组件更新结束之后执行,在初始化render时不执行
    componentDidUpdate(){
        this._sendMessage();
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.option !== this.props.option) {
            this._sendMessage();
        }
    }
    _handleMessage(e) {
        this.setState({webViewData: e.nativeEvent.data}); //从html接收数据
    }
    _sendMessage() {
        this.refs.charts.postMessage(JSON.stringify(this.props.option)); //发送数据到html页面
    }
    render() {
        return (
            
                 source={{ uri: 'file:///android_asset/base/ImportantMap/map.html'}}
                    OnMessage={()=> this._handleMessage()}
                    />
            
        );
    }
}

附上html接收数据:

 window.Onload= function(){
        document.addEventListener('message', function (e) { //监听webview的message事件
           // document.getElementById('main').textCOntent=e.data;
            var message = JSON.parse(e.data);}}

再附上assets下的页面截图;



就可以啦!!!!


推荐阅读
  • C/C++ 应用程序的安装与卸载解决方案
    本文介绍了如何使用Inno Setup来创建C/C++应用程序的安装程序,包括自动检测并安装所需的运行库,确保应用能够顺利安装和卸载。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • Hadoop MapReduce 实战案例:手机流量使用统计分析
    本文通过一个具体的Hadoop MapReduce案例,详细介绍了如何利用MapReduce框架来统计和分析手机用户的流量使用情况,包括上行和下行流量的计算以及总流量的汇总。 ... [详细]
  • 本文探讨了在 APICloud 平台使用 execScript 方法时如何正确传递对象参数,并提供了详细的示例和解释。 ... [详细]
  • 本文详细介绍如何在SSM(Spring + Spring MVC + MyBatis)框架中实现分页功能。包括分页的基本概念、数据准备、前端分页栏的设计与实现、后端分页逻辑的编写以及最终的测试步骤。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 本文探讨了如何在 Spring MVC 框架下,通过自定义注解和拦截器机制来实现细粒度的权限管理功能。 ... [详细]
  • 吴石访谈:腾讯安全科恩实验室如何引领物联网安全研究
    腾讯安全科恩实验室曾两次成功破解特斯拉自动驾驶系统,并远程控制汽车,展示了其在汽车安全领域的强大实力。近日,该实验室负责人吴石接受了InfoQ的专访,详细介绍了团队未来的重点方向——物联网安全。 ... [详细]
  • 问题描述现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能;在实际开发过程中 ... [详细]
  • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
  • spring boot使用jetty无法启动 ... [详细]
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
author-avatar
gjagtm2502855737
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有