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ó.

  1. 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

  1. Obre l'App Store al teu Mac.
  2. Cerca "Xcode" i fes clic a "Obtenir" per descarregar i instal·lar Xcode.
  3. Un cop instal·lat, obre Xcode i accepta els termes i condicions.

Instal·lació de Node.js i Watchman

  1. Descarrega i instal·la Node.js des de nodejs.org.
  2. Instal·la Watchman utilitzant Homebrew:
    brew install watchman
    

Instal·lació de React Native CLI

Instal·la React Native CLI globalment utilitzant npm:

npm install -g react-native-cli

  1. Creació d'un projecte React Native

Crea un nou projecte React Native utilitzant la CLI:

npx react-native init MyNewProject

  1. Configuració del projecte per a iOS

Obrir el projecte a Xcode

  1. Navega al directori del teu projecte:
    cd MyNewProject
    
  2. Obre el fitxer del projecte .xcworkspace a Xcode:
    open ios/MyNewProject.xcworkspace
    

Configuració de l'identificador del paquet

  1. A Xcode, selecciona el projecte a la barra lateral esquerra.
  2. A la pestanya "General", canvia el "Bundle Identifier" a un identificador únic (per exemple, com.elmeuempresa.mynewproject).

Configuració de l'equip de desenvolupament

  1. A la mateixa pestanya "General", selecciona el teu equip de desenvolupament a la secció "Signing & Capabilities".
  2. Si no tens un equip de desenvolupament, pots crear un compte de desenvolupador gratuït a developer.apple.com.

  1. Construcció de l'aplicació per a iOS

Executar l'aplicació en un simulador

  1. Assegura't que el simulador de iOS està seleccionat a Xcode.
  2. Executa l'aplicació des de la línia de comandes:
    npx react-native run-ios
    

Construir l'aplicació per a un dispositiu físic

  1. Connecta el teu dispositiu iOS al Mac.
  2. Selecciona el teu dispositiu a Xcode.
  3. Fes clic al botó de "Play" per construir i executar l'aplicació al dispositiu.

Construir l'aplicació per a distribució

  1. A Xcode, selecciona "Product" > "Archive" per crear un arxiu de l'aplicació.
  2. Un cop completat l'arxiu, obre l'Organizer i selecciona l'arxiu recentment creat.
  3. Fes clic a "Distribute App" i segueix les instruccions per distribuir l'aplicació a l'App Store o per a distribució ad hoc.

  1. Exercici pràctic

Objectiu

Construir i executar una aplicació React Native bàsica en un simulador iOS.

Passos

  1. Crea un nou projecte React Native anomenat TestApp.
  2. Configura l'identificador del paquet a com.elmeuempresa.testapp.
  3. 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.

© Copyright 2024. Tots els drets reservats