Cordova Android ReactJS答案

【问题标题】：Cordova Android ReactJSCordova Android ReactJS
【发布时间】：2015-11-30 00:43:12
【问题描述】：

我在构建 Android 应用时遇到了 Cordova 问题。当我打开我的 cordova 应用程序时，我的 react-router 从未被调用，我不明白为什么。

当我在浏览器中运行我的应用程序时，它运行得非常好，但是当我使用 cordova 构建应用程序时，该应用程序只显示白屏。

这是我的路由器：

export default (
  <Router history={history}>
    <Route component={ App }>
      <Route name="Calendar" path="calendar" component={ Calendar } ignoreScrollBehavior />
      <Route name="Story" path="story/:id" component={ Story } ignoreScrollBehavior />
      <Redirect from="/" to="calendar" />
      <Redirect from="/index.html" to="calendar" />
    </Route>
  </Router>
);

这是我的 webpack.config：

var path = require('path');
var webpack = require("webpack");

module.exports = {
  context: __dirname + '/app',
  entry: ['./render.js'],
  output: {
    path: __dirname + '/www',
    filename: 'bundle.js'
  },
  resolve: {
    root: [path.join(__dirname, "bower_components")]
  },
  node: {
    console: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          optional: ['runtime'],
          stage: 0
        }
      },
      { test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(css|scss)$/,
        loader: 'style!css!sass!postcss'
      },
      {
        test: /\.(jpg|png|woff|ttf|eot|svg|otf)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    )
  ]
};

render.js 我的配置文件的入口点：

'use strict';

import './assets/scss/main.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import routes from './routes.js';
import createBrowserHistory from 'history/lib/createBrowserHistory';

let history = createBrowserHistory();

ReactDOM.render(<Router history={history}>{routes}</Router>, document.getElementById('app'));

最后但并非最不重要的是我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="user-scalable=no, initial-scale=1, maximum-scale=1,
      minimum-scale=1, width=device-width" name="viewport">
   <title>Calendar</title>
  </head>
  <body>
  <div id="app" class="container"></div>
  <script src="bundle.js"></script>
  </body>
</html>

到目前为止，我发现我的应用一旦使用 cordova 构建，就不再调用路由器，因此永远停留在 index.html 上而没有任何内容。

所以我的问题是如何解决这个问题？

【问题讨论】：

标签： android cordova reactjs webpack

【解决方案1】：

您可以通过在cordova 中使用hashHistory 来修复它。由于没有服务器会从 cordova 为您的应用程序提供服务（仅加载文件资产并且无法进行重写），因此索引路由将不起作用，由于 ERROR_FILE_NOT_FOUND 将您的页面留空。

调整您的render.js 以包含

// since no server is used in the cordova env, use hashHistory there const baseHistory = process.env.CORDOVA ? hashHistory : browserHistory;

并调整您的 webpack 配置以使用 DefinePlugin 设置 env 变量

const __CORDOVA__ = process.env.BUILD_TARGET === 'cordova';
...
new webpack.DefinePlugin({
    'process.env': {
        CORDOVA: JSON.stringify(__CORDOVA__),
    },
}),

【讨论】：