En aquest tema, aprendrem com construir i desplegar una aplicació React Native per a dispositius iOS. Aquest procés inclou la configuració de l'entorn de desenvolupament, la creació d'un projecte, la configuració de l'aplicació per a iOS i la construcció de l'aplicació per a la seva distribució.
- Configuració de l'entorn de desenvolupament
Requisits previs
Abans de començar, assegura't de tenir els següents requisits instal·lats al teu sistema:
- macOS (necessari per a la construcció d'aplicacions iOS)
- Xcode (descarrega'l des de l'App Store)
- Node.js (recomanem la versió LTS)
- Watchman (opcional, però recomanat per a la supervisió de canvis de fitxers)
Instal·lació de Xcode
- Obre l'App Store al teu Mac.
- Cerca "Xcode" i fes clic a "Obtenir" per descarregar i instal·lar Xcode.
- Un cop instal·lat, obre Xcode i accepta els termes i condicions.
Instal·lació de Node.js i Watchman
- Descarrega i instal·la Node.js des de nodejs.org.
- Instal·la Watchman utilitzant Homebrew:
brew install watchman
Instal·lació de React Native CLI
Instal·la React Native CLI globalment utilitzant npm:
- Creació d'un projecte React Native
Crea un nou projecte React Native utilitzant la CLI:
- Configuració del projecte per a iOS
Obrir el projecte a Xcode
- Navega al directori del teu projecte:
cd MyNewProject
- Obre el fitxer del projecte
.xcworkspace
a Xcode:open ios/MyNewProject.xcworkspace
Configuració de l'identificador del paquet
- A Xcode, selecciona el projecte a la barra lateral esquerra.
- A la pestanya "General", canvia el "Bundle Identifier" a un identificador únic (per exemple,
com.elmeuempresa.mynewproject
).
Configuració de l'equip de desenvolupament
- A la mateixa pestanya "General", selecciona el teu equip de desenvolupament a la secció "Signing & Capabilities".
- Si no tens un equip de desenvolupament, pots crear un compte de desenvolupador gratuït a developer.apple.com.
- Construcció de l'aplicació per a iOS
Executar l'aplicació en un simulador
- Assegura't que el simulador de iOS està seleccionat a Xcode.
- Executa l'aplicació des de la línia de comandes:
npx react-native run-ios
Construir l'aplicació per a un dispositiu físic
- Connecta el teu dispositiu iOS al Mac.
- Selecciona el teu dispositiu a Xcode.
- Fes clic al botó de "Play" per construir i executar l'aplicació al dispositiu.
Construir l'aplicació per a distribució
- A Xcode, selecciona "Product" > "Archive" per crear un arxiu de l'aplicació.
- Un cop completat l'arxiu, obre l'Organizer i selecciona l'arxiu recentment creat.
- Fes clic a "Distribute App" i segueix les instruccions per distribuir l'aplicació a l'App Store o per a distribució ad hoc.
- Exercici pràctic
Objectiu
Construir i executar una aplicació React Native bàsica en un simulador iOS.
Passos
- Crea un nou projecte React Native anomenat
TestApp
. - Configura l'identificador del paquet a
com.elmeuempresa.testapp
. - Executa l'aplicació en un simulador iOS.
Solució
# Crear un nou projecte npx react-native init TestApp # Navegar al directori del projecte cd TestApp # Obrir el projecte a Xcode open ios/TestApp.xcworkspace # Configurar l'identificador del paquet i l'equip de desenvolupament a Xcode # Executar l'aplicació en un simulador npx react-native run-ios
Conclusió
En aquesta secció, hem après com configurar l'entorn de desenvolupament per a iOS, crear un projecte React Native, configurar l'aplicació per a iOS i construir l'aplicació per a la seva distribució. Aquestes habilitats són essencials per a qualsevol desenvolupador que vulgui crear aplicacions React Native per a dispositius iOS. En el següent tema, explorarem com construir aplicacions per a Android.
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