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"
          }
    }
    
  • 相关阅读:
    【Scrum】2.18
    【scrum】2.22
    绿色软件 Vs 安装软件
    【Scrum】2.21
    【scrum】2.15
    读《design pattern》有感
    让广告再播一会儿~
    Qt::日志处理
    终于在博客园开通了
    惹毛程序员的十件事
  • 原文地址:https://www.cnblogs.com/chriiess/p/8919175.html
Copyright © 2011-2022 走看看