我认为很难找到如何解决此问题的完整指南。我从头到尾解决了这个问题,以便能够在 Windows 上的模拟 Android 设备上运行 Create React App:
首先创建一个 React 应用或使用您现有的应用。
npx create-react-app my-app
https://github.com/facebook/create-react-app#creating-an-app
然后安装 Cordova:
npm install -g cordova
https://cordova.apache.org/docs/en/latest/guide/cli/
在我的例子中,在my-app 文件夹中创建一个新的cordova 应用程序:
cordova create hello com.example.hello HelloWorld
将目录更改为 hello 或您的 Cordova 应用程序。
cordova platform add ios
cordova platform add android
运行 cordova requirements 以查看构建项目所需的内容。
由于我使用的是 Windows,因此在此示例中我将只为 Android 构建它。
cordova platform remove ios
并确认我只有带有cordova platform ls的Android
根据cordova requirements 命令安装你需要的东西。由于我进行了全新安装,因此我需要一切:Java 开发工具包 (JDK) 8、Gradle 和 Android SDK。链接可以在这里找到:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support
或者:
https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
https://gradle.org/install/
https://developer.android.com/studio/index.html
安装后打开 Android Studio。我选择了标准安装,但失败并出现以下警告:
无法安装英特尔 HAXM。详情请查看
安装日志:“C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt”
英特尔® HAXM 安装失败。要安装英特尔® HAXM,请遵循
在以下位置找到说明:
https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows 安装程序日志位于
C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt 安装程序日志内容:
=== 开始记录:2020-07-10 16:39:27 === 此计算机不支持英特尔虚拟化技术 (VT-x) 或正在
Hyper-V 专用。无法安装 HAXM。请确保
Hyper-V 在 Windows 功能中被禁用,或参考 Intel HAXM
文档以获取更多信息。
不过,无论如何我都可以启动应用程序并添加一个在配置下找到的 Android 虚拟设备 (AVD)。
我选择添加Pixel XL 和R 系统映像。
但是再次运行cordova requirements,我可以看到我需要一个 API 级别为 28 的 Android 目标。R 是级别 30。
因此,我使用 API 级别 28 x86_64 安装了 Pie 并创建了一个新的虚拟设备。
我没有打开AVD Manager,而是打开了SDK manager,还下载了Android 9.0 Pie SDK。
现在一切看起来都很好:
然后运行cordova emulate android 来测试默认的 Cordova 应用程序。
如果它有效,它应该如下所示:
将目录更改为my-app。
编辑package.json并在依赖项之前添加"homepage": "./",:
感谢@BlackBeard。来源:https://stackoverflow.com/a/46785362/3850405
运行npm run build
清除my-app\hello\www 中的所有内容,然后将my-app\build 中的所有内容复制到my-app\hello\www。
瞧:
如果您不编辑my-app package.json 并添加"homepage": "./",,它将如下所示:
经验教训:
1.
如果您在项目中使用<Router>,请将其更改为<HashRouter>,否则您将看到空白显示,因为屏幕上不会呈现任何内容。适用于 iOS 和 Android。
来源:
https://stackoverflow.com/a/46785362/3850405
2.
您需要一个允许 URL 的白名单。来自文档:
默认情况下,导航只允许到 file:// URL。允许
其他 URL,您必须在 config.xml 中添加标签:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
像这样安装:
cordova plugin add cordova-plugin-whitelist
然后编辑位于应用程序根目录中的config.xml 并添加以下任何内容:
<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />
<!-- Wildcards are allowed for the protocol, as a prefix
to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />
<!-- A wildcard can be used to whitelist the entire network,
over HTTP and HTTPS.
*NOT RECOMMENDED* -->
<allow-navigation href="*" />
来源:https://stackoverflow.com/a/30327204/3850405
3.
即使您使用的是白名单,您仍可能需要访问不支持 https 的 http API。默认情况下这是不允许的,并且可能会引起一些真正的头痛。通过编辑config.xml 并在<platform name="android"> 下添加以下内容也可以解决此问题:
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /></edit-config>
-
鉴于您不浏览到 URL,任何 API 调用都必须指定实际的服务器。我通常使用 Axios,所以我们只需要将我们的服务器添加到默认 URL。示例:
import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';
const getConfig = (url: string, method: Method, params?: any, data?: any) => {
const config: AxiosRequestConfig = {
url: 'http://192.168.1.249' + url,
method: method,
responseType: 'json',
params: params,
data: data,
headers: { 'X-Requested-With': 'XMLHttpRequest' },
}
return config;
}
export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
return axios(getConfig(url, method))
}
然后这样调用:
const path = '/api/test/'
export const initialLoad = (number: number): AxiosPromise<InitialLoadDto> => {
return sendRequest(path + 'InitialLoad/' + number, 'get');
}