个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在构建 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 上，没有任何内容。
所以我的问题是我该如何解决这个问题？
最佳答案
您可以使用 cordova 中的 hashHistory 修复它。由于没有服务器会从 cordova 为您的应用程序提供服务(仅加载文件 Assets ，无法进行重写)，索引路由将不起作用，由于 ERROR_FILE_NOT_FOUND，您的页面将变为空白。
调整你的 render.js 以包含
//因为在 cordova 环境中没有使用服务器，所以在那里使用 hashHistory
const baseHistory = process.env.CORDOVA ？ hashHistory : 浏览器历史；
并调整您的 webpack 配置以使用 DefinePlugin 来设置环境变量
const __CORDOVA__ = process.env.BUILD_TARGET === 'cordova';
...
new webpack.DefinePlugin({
'process.env': {
CORDOVA: JSON.stringify(__CORDOVA__),
},
}),
关于android - Cordova 安卓 ReactJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33989921/
25
4
0
我想将 EditText 始终设置为 LTR，我该怎么做？android:textDirection 似乎确实是答案，我无法让项目使用该指令进行编译 最佳答案 为 editText 使用引力 andr
我希望我的应用在每次打开时都显示登录屏幕。使用 android:clearTaskOnLaunch="true" 一切正常。但是有一个错误，只有在手机关机并且应用程序首先使用小部件启动时才会发生。 I
实际上我的要求是我想将动态文件加载到像图像一样的网页中。视频，音频等，它来自 Assets 或应用程序自己的文件目录，这不是问题。 我尝试使用以下两种方式。 方式一 这是我的 html 文件在 ass
我正在触发一个 DatePickerDialog，在 api 22 (Android 5.1) 之前它一直在工作并显示良好，我在上面设置混合和最大日期(最小 = 当前日期，最大 = 从当前日期开始的
我有一个 ListView ，我在其中将标题 View 添加到该列表。一切都很好，但是当滚动列表 headerview 也随着列表移动时，所以我想避免 headerview 滚动，我的意思是当我列表到
虽然我在android上做过一些app，但我还是一头雾水。是否可以使用 SDK 4.0 中的功能，并在 android 2.1 或更低版本上运行该应用程序？ 我尝试了你们提到的方法，但出现错误 - F
您好，我正在开发小型 android 应用程序，我想在其中显示带有一些元素的简单 gridview。它工作正常。唯一的问题是即使有空间，它也总是只显示两列。它平均将屏幕分成 2 列并仅显示两个元素。如
我正在使用 Android 2.3.3 API 构建一个应用程序。我需要识别方向的变化并执行一些操作。所以我在 Android Manifest 中添加了以下内容， android:configCha
我正在尝试在“点击”包含特定 MIME 类型的 nfc 标签时开始一项 Activity 。我制作了一个 mime 类型为“text/plain”的标签，并将其添加到 list 中:
我可以将一些数据保存到文件中 val byteArrayOutputStream = ByteArrayOutputStream() byteArrayOutputStream.wri
我正在尝试解析一个包含复杂阿拉伯字母的 XML 文件.. 当我在 android 2.3.7 上测试时，并不是所有的阿拉伯字母都被支持，仍然有一些复杂的显示为方 block .. 但是在 androi
我需要编写一个方法来确定设备是平板电脑还是手机。我不需要根据这个显示不同的用户界面。我只需要有关设备的信息，以便将来我可以将其发送到指标。 在互联网上，我找到了很多方法来确定设备是否是平板电脑。我已经
我正在玩文字转语音，让我的测试应用程序更有趣。它适用于模拟器，但不适用于我的手机，因为我的默认语言环境不是英语。 但是，文本是英文的，所以 tts 当然应该使用英文。据我所知，我可以实现一个自动安装，
我正在使用 MVVM 和整洁的架构编写应用程序。在其中一个屏幕上，我需要使用 pagination 实现 RecyclerView。我将使用库 Paging3。 Android 开发者推荐在存储库层使
这个问题在这里已经有了答案: I lost my .keystore file? (12 个回答) 4年前关闭。 当我以前的操作系统损坏并安装新的(7 月 3 日)时，以前的 android_key_
我正在使用 MVVM 和整洁的架构编写应用程序。在其中一个屏幕上，我需要使用 pagination 实现 RecyclerView。我将使用库 Paging3。 Android 开发者推荐在存储库层使
在我的 v27\style.xml 中，我有以下代码来设置白色导航栏: @color/colorPrimary @color/colorPrimaryDark @color/
我想通过发送电子邮件 startActivity(Intent.createChooser(new Intent(android.content.Intent.ACTION_SEND))) 我知道要将
我实现了一个自定义 ListView ，它看起来像 Twitter 时间线。 adapter = new MyClickableListAdapter(this, R.layout.timeline,
我有一个显示启动画面的自定义对话框； mSplashDialog = new Dialog(MyActivity.this,R.layout.splash); mSplashDialog.setCon
我是一名优秀的程序员,十分优秀！