• react-native webView android使用本地html问题


    react-native WebView组件使用本地html时候,一般都是这样使用

    var source =  require('../html/my.html') : 
    <WebView  source={source} />
    

    在debug模式下,android和ios是没有问题的
    然而,在release模式下,也就是打包的时候,安卓会无法读取到html路径,导致无法加载成功!

    在网上查找一番资料之后,得知要把html放在android的资源目录下面,并且使用file:///android_asset/路径才能加载!
    具体路径:android/app/src/main/assets
    我们在这个路径下面建立html文件夹,专门放置我们的html
    代码修改一下

    // 区分ios和android
    var source = (Platform.OS == 'ios') ? require('../html/my.html') : {uri: "file:///android_asset/html/my.html"}
    

    嗯~~那这样我们每次修改html代码都得复制两份代码,有点不可接受
    修改一下,修改html代码后每次编译自动复制到android资源目录下
    打开android/app/build.gradle
    增加

    // Android currently requires the HTML files in React Native to be
    // in the Android Assets
    // https://github.com/facebook/react-native/pull/17304
    task copyReactNativeHTML(type: Copy) {
        from '../../app/html'
        into 'src/main/assets/html'
    }
    // Note that you may need to add other build variants
    gradle.projectsEvaluated {
        bundleDebugJsAndAssets.dependsOn(copyReactNativeHTML)
        bundleReleaseJsAndAssets.dependsOn(copyReactNativeHTML)
    }
    

    ok,这样每次编译android就不用再去手动复制了

    等等~
    我们知道debug模式是没问题的,这样为了兼容debug模式不用去手动复制,再次修改,最终如下

    var source = ""
    if (__DEV__) {
          // debug模式
          source = require('../html/my.html')
    } else {
          // release模式
          source = (Platform.OS == 'ios') ? require('../html/my.html') : {
            uri: "file:///android_asset/html/my.html"
          }
    }
    
  • 相关阅读:
    Spring Boot 如何使用拦截器、过滤器、监听器
    数据库水平分库扩展
    单点登录OAuth2
    三种合并请求的方式帮提高接口性能
    大型项目前端架构设计
    mysql总结列表
    互联网金融架构发展史
    实战!工作中常用到哪些设计模式
    代码对比工具,就用这7个!
    开发必备的常用 Linux 命令整理
  • 原文地址:https://www.cnblogs.com/chriiess/p/8919175.html
Copyright © 2020-2023  润新知