En aquest tema, aprendrem com construir i preparar la teva aplicació React Native per a dispositius Android. Aquest procés inclou la configuració de l'entorn de desenvolupament, la creació d'un APK (Android Package) i la preparació per a la publicació a Google Play.
- Configuració de l'entorn de desenvolupament
Requisits previs
Abans de començar, assegura't de tenir instal·lats els següents components:
- Node.js
- React Native CLI
- Android Studio
Instal·lació d'Android Studio
- Descarrega i instal·la Android Studio des del lloc oficial.
- Durant la instal·lació, assegura't de seleccionar l'opció per instal·lar l'Android SDK, l'Android SDK Platform, i l'Android Virtual Device (AVD).
Configuració de les variables d'entorn
-
Obre Android Studio i segueix les instruccions per instal·lar les eines necessàries.
-
Configura les variables d'entorn per assegurar-te que React Native pugui trobar l'Android SDK. Afegeix les següents línies al teu fitxer
~/.bash_profile
o~/.zshrc
(depèn del teu shell):export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools
-
Aplica els canvis executant
source ~/.bash_profile
osource ~/.zshrc
.
- Creació d'un APK
Executar l'aplicació en un emulador o dispositiu físic
-
Inicia un emulador des d'Android Studio o connecta un dispositiu Android físic.
-
Executa l'aplicació amb el següent comandament:
npx react-native run-android
Generació d'un APK de producció
-
Crea una clau de signatura per signar el teu APK. Executa el següent comandament i segueix les instruccions:
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
-
Mou la clau generada al directori
android/app
del teu projecte. -
Configura Gradle per utilitzar la clau de signatura. Afegeix la següent configuració al fitxer
android/app/build.gradle
:android { ... signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } } buildTypes { release { signingConfig signingConfigs.release minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } }
-
Crea un fitxer
gradle.properties
aandroid/
amb les següents línies:MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****
-
Genera l'APK de producció executant el següent comandament:
cd android ./gradlew assembleRelease
-
Troba l'APK generat a
android/app/build/outputs/apk/release/app-release.apk
.
- Preparació per a la publicació a Google Play
Verificació de l'APK
- Prova l'APK en diversos dispositius per assegurar-te que funciona correctament.
- Utilitza l'eina de verificació d'APK d'Android Studio per detectar possibles problemes.
Publicació a Google Play
- Crea un compte de desenvolupador a Google Play Console.
- Crea una nova aplicació i segueix les instruccions per carregar l'APK.
- Completa la informació requerida (descripció, captures de pantalla, etc.).
- Publica l'aplicació i espera la revisió de Google.
Resum
En aquesta secció, hem après a configurar l'entorn de desenvolupament per a Android, crear un APK de producció i preparar-lo per a la publicació a Google Play. Aquest procés és essencial per portar la teva aplicació React Native a un públic més ampli. En el següent tema, explorarem com publicar la teva aplicació a l'App Store d'Apple.
Curs de React Native
Mòdul 1: Introducció a React Native
- Què és React Native?
- Configuració de l'entorn de desenvolupament
- Aplicació Hello World
- Comprendre JSX
- Components i Props
Mòdul 2: Components bàsics i estilització
- Visió general dels components bàsics
- Text, View i Image
- Estilització amb Flexbox
- Gestió de l'entrada de l'usuari
- ScrollView i ListView
Mòdul 3: Estat i cicle de vida
- Mètodes d'estat i cicle de vida
- Gestió d'esdeveniments
- Renderització condicional
- Llistes i claus
- Formularis i components controlats
Mòdul 4: Navegació
- Introducció a React Navigation
- Stack Navigator
- Tab Navigator
- Drawer Navigator
- Passar paràmetres a les rutes
Mòdul 5: Xarxes i dades
- Obtenir dades amb Fetch API
- Utilitzar Axios per a sol·licituds HTTP
- Gestió d'errors de xarxa
- AsyncStorage per a dades locals
- Integració amb APIs REST
Mòdul 6: Conceptes avançats
Mòdul 7: Desplegament i publicació
- Construcció per a iOS
- Construcció per a Android
- Publicació a l'App Store
- Publicació a Google Play
- Integració i lliurament continus