Convert Your React JS APP into an Android APP with the Correct Icons & Splash (Able Upload To Phone)
1. Create "capacitor.config.json" in root directory of your project:
{
"appId": "io.ionic.{NAMEOFYOURAPP}",
"appName": "{NAMEOFYOURAPP}",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "build",
"cordova": {}
}
2. Create "ionic.config.json" in the root directory of your project:
{
"name": "{NAMEOFYOURAPP}",
"integrations": {
"capacitor": {}
},
"type": "react"
}
3. Build your react project
$ npm run build
4. Install ionic capacitor:
$ npm install @capacitor/core
$ npm install @capacitor/cli --save-dev
$ npm install @capacitor/android
$ npm install @capacitor/filesystem #(save file to phone)
$ npx cap init
ANDROID:
$ npx cap add android
$ npx cap sync #(to sync @capacitor/filesystem plugin)
IOS:
$ npx cap add ios
5. Add Permissions to ..\android\app\src\main\AndroidManifest.xml
❮uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/❯
❮uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /❯
7. Open you React app with Android Studio:
❯❯ File ❯❯ Open
* Navigate to the "android" folder in your react project
❯❯ Run ❯❯ Run 'app'
8. Build an Unsigned APK with Android Studio:
❯❯ Build ❯ Build Bundle(s)/APK(s) ❯ Build APK(s)
* APK Found: android\app\build\outputs\apk\debug
* The APK is named "app-debug.apk"
=========================
Getting Your Icons on the APP
=========================
1. Delete all existing icon assets in Android Studio:
- Delete ic_launcher.background.xml and ic_launcher_foreground.xml in drawable folder. This is just an example, you could be any icon asset file format.
- Delete all mipmap folders which consist of all the icon assets
2. Generate Icons PNG:
* Icon — requires a 1024x1024 png file (transparency allowed)
* Splash — requires a 4096x4096 png file (no transparency)
- Visit ApeTools (https://apetools.webprofusion.com/)
- Visit MakeAppIcon (https://makeappicon.com/)
- Vist pgicons.abiro.com (https://pgicons.abiro.com/)
3. Generate launcher icon from image asset
- Right-click in the project window, go to New -❯ Image Asset
- Make sure the Icon Type is Launcher Icons (Adaptive and Legacy), which is the default)
- In Foreground Layer, Source Asset, select Image Asset Type
~ Browse to your saved icon png
~ In Scaling, Resize the icon accordingly
- In the Background Layer, change the Source Asset Type Color to white color (i.e. FFFFFF)
4. Click Next -❯ Finish.
- Different screen resolution icon assets are now generated in the mipmap folders
- The default Res Directly is debug folder. Make sure you select the main folder, so you app with both debug and release variants.
5. For the splash icons:
- In your android folder, visit app -❯ src -❯ main -❯ res
- Under drawable... folders, replace each individual splash.png with your custom splash.png
- taking care to keep the filename the same (i.e. splash.png)
======================================
Upload to Your Phone's Document Folder
https://capacitorjs.com/docs/apis/fil...
======================================
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
Filesystem.requestPermissions();
async function UPLOAD(){
await Filesystem.writeFile({
path: 'FILENAME.txt',
data: 'SOME_DATA_TO_SAVE',
directory: Directory.Documents,
encoding: Encoding.UTF8,
recursive: true
});
}
DONATE:
---------------
PAT: / rezatahirkheli
PP: https://www.paypal.com/paypalme/rezat...
BTC: 3EUQBWZKX9Vcwdffd3cUGATQopxrAQQxJ9
LTC: MBXE6hJgxxFYSD8SjmR7sHCHGTqFXmNGoU
Смотрите видео Convert Your React JS APP into an Android APP with the Correct Icons & Splash (Able Upload To Phone) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь ZeroLife 09 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,114 раз и оно понравилось 22 людям.