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"
          }
    }
    
  • 相关阅读:
    P2590 [ZJOI2008]树的统计(树链剖分)
    【算法】线性排序
    【LeetCode每天一题】Median of Two Sorted Arrays(两数组中的中位数)
    【算法】归并排序
    【LeetCode每天一题】Longest Substring Without Repeating Characters(最长无重复的字串)
    【算法】快排
    【LeetCode每天一题】Add Two Numbers(两链表相加)
    【LeetCode每天一题】Two Sum(两数之和)
    【算法】选择排序
    【算法】插入排序
  • 原文地址:https://www.cnblogs.com/chriiess/p/8919175.html
Copyright © 2011-2022 走看看