Question

在我的react-native应用程序中，我想显示一个webview，它会加载一个本地html5 Web应用程序（单页面应用程序，SPA）。

我可以使用

加载位于相对文件夹webapp内的html文件

var webapp = require('./webapp/index.html');

和

<WebView source={webapp}></WebView>

正如我在这篇帖子中所述：react native webview load from device local file system

不幸的是，这个本地webapp的资产，如.js和.css文件，都没有被webapp加载。

在react-native app的开发过程中，这些文件可通过开发服务器获得。但是，当应用程序在iOS设备上打包并运行时，资源不可用（我在Safari开发人员工具中出现404错误）。

如何确保webapp文件夹中的所有资产（JS，CSS等）都在本地打包的应用程序中可用。

Answer 1

通过设置baseURL，WebView知道在哪里查找链接到的css / js

像：

    module.exports = function (config) {
      config.set({
        basePath: '',
        frameworks: ['jasmine', 'angular-cli'],
        plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('karma-remap-istanbul'),
          require('angular-cli/plugins/karma')
        ],
        files: [
          { pattern: './src/test.ts', watched: false },
          "./public/assets/js/highlight.pack.js",
          "./node_modules/amcharts3/amcharts/amcharts.js",
          "./node_modules/amcharts3/amcharts/xy.js",
          "./node_modules/amcharts3/amcharts/gauge.js",
          "./node_modules/amcharts3/amcharts/serial.js",
          "./node_modules/amcharts3/amcharts/pie.js",
          "./node_modules/amcharts3/amcharts/themes/light.js",
          "./node_modules/amcharts3/amcharts/themes/dark.js",
          "./node_modules/amcharts3/amcharts/themes/black.js",
          "./node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
        ],
        preprocessors: {
          './src/test.ts': ['angular-cli']
        },
        mime: {
          'text/x-typescript': ['ts','tsx']
        },
        remapIstanbulReporter: {
          reports: {
            html: 'coverage',
            lcovonly: './coverage/coverage.lcov'
          }
        },
        angularCli: {
          config: './angular-cli.json',
          environment: 'dev'
        },
        reporters: config.angularCli && config.angularCli.codeCoverage
                  ? ['progress', 'karma-remap-istanbul']
                  : ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
      });
    };

在github上查看问题的答案：

https://github.com/facebook/react-native/issues/1442#issuecomment-106906969

或者通过nick-weaver阅读这个详细答案的例子： Loading javascript into a UIWebView from resources

包含本地网络应用以反应原生网络视图

1 个答案: