zoukankan      html  css  js  c++  java
  • 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"
          }
    }
    
  • 相关阅读:
    sql server 2008数据库 降为 sql server 2005数据库 最终方案总结
    android 单元测试
    C# 5.0中引入了async 和 await
    Android之NDK开发
    Java NIO原理 图文分析及代码实现
    【第六篇】Volley之https相关
    【第五篇】Volley代码修改之图片二级缓存以及相关源码阅读(重写ImageLoader.ImageCache)
    【第四篇】Volley修改之GsonRequest
    java复习 --集合类
    android 图片加载优化,避免oom问题产生
  • 原文地址:https://www.cnblogs.com/chriiess/p/8919175.html
Copyright © 2011-2022 走看看