Getting Started: Ionic + Capacitor + React + Typescript + Android

2022-09-21 10:38:56 浏览数 (1)

  • Ionic Capacitor React Typescript Android

  • Tech Stack

  • Debug on Physical Android Devices
  • References

Ionic Capacitor React Typescript Android

Tech Stack

代码语言：javascript复制
 "dependencies": {
   "@capacitor/android": "^2.4.2",
   "@capacitor/core": "2.4.2",
   "@ionic/react": "^5.0.7",
   "@ionic/react-hooks": "^0.0.8",
   "@ionic/react-router": "^5.0.7",
   "ionic": "^5.4.16",
   "react": "^16.13.0",
   "typescript": "3.8.3"
 },

Installation

I'm lazy, check official doc instead.

Troubleshooting

Connect to 127.0.0.1:1080 Failed: Connection refused: connect

Local Proxy Error

Check below 2 files:

  • gradle.properties under current project
  • C:UsersAdministrator.gradlegradle.properties Delete/comment below 4 lines:
代码语言：javascript复制
systemProp.https.proxyPort=1080
systemProp.http.proxyHost=127.0.0.1
systemProp.https.proxyHost=127.0.0.1
systemProp.http.proxyPort=1080
No module in Run/Debug Configuration

Click File--Sync Project With Gradle Files

Failed to load resource: net:: ERR_CLEARTEXT_NOT_PERMITTED

Error after packed app

Open your file platforms/android/app/src/main/AndroidManifest.xml and add:

代码语言：javascript复制
<uses-permission android:name = "android.permission.INTERNET" />
<uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name = "android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name = "android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name = "android.permission.READ_PHONE_STATE" />

And run debug again

Debug on Physical Android Devices

  1. Activate Developer Options and open USB Debugging
  2. Connect your android to PC
  3. Start ionic server: ionic serve
  4. Chrome/Edge access chrome://inspect/#devices
    • You will see your device listed but you won't able to see inspect link
  5. Open the app in your android
    • You will see inspect link now
  6. Click inspect then you can debug it with source

References

  • https://blog.csdn.net/qiushisoftware/article/details/87395458
  • https://ionicframework.com/docs/react/quickstart
  • https://ionicframework.com/docs/troubleshooting/debugging#android-and-chrome
android https 网络安全 typescript javascript

0 人点赞