El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

React Native: Construir aplicacions mòbils

Següent ►
►

Introducció a React Native

React Native és un framework desenvolupat per Facebook que permet crear aplicacions mòbils utilitzant JavaScript i React. A diferència de les aplicacions web, React Native permet crear aplicacions natives per a iOS i Android amb una única base de codi.

Avantatges de React Native

  • Reutilització de codi: Permet compartir gran part del codi entre les plataformes iOS i Android.
  • Rendiment natiu: Les aplicacions creades amb React Native tenen un rendiment proper al natiu.
  • Gran comunitat: Hi ha una gran comunitat de desenvolupadors i una àmplia gamma de biblioteques disponibles.

Configuració de l'entorn de desenvolupament

Requisits previs

  • Node.js
  • npm o yarn
  • Android Studio (per a desenvolupament Android)
  • Xcode (per a desenvolupament iOS)

Instal·lació de React Native CLI

npm install -g react-native-cli

Creació d'un nou projecte

react-native init MyNewProject
cd MyNewProject

Executar l'aplicació

Per a Android:

npx react-native run-android

Per a iOS:

npx react-native run-ios

Estructura del projecte

Un projecte de React Native té una estructura similar a la següent:

MyNewProject/
├── android/
├── ios/
├── node_modules/
├── src/
│   ├── components/
│   ├── screens/
│   ├── App.js
├── package.json
└── index.js
  • android/ i ios/: Contenen el codi específic per a cada plataforma.
  • src/: Conté el codi de l'aplicació.
  • components/: Components reutilitzables.
  • screens/: Pantalles de l'aplicació.
  • App.js: Punt d'entrada de l'aplicació.
  • index.js: Registra l'aplicació.

Crear el primer component

Exemple de component bàsic

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const HelloWorld = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hola Món!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default HelloWorld;

Explicació del codi

  • View: Equivalent a un div en HTML.
  • Text: Utilitzat per mostrar text.
  • StyleSheet: Permet definir estils per als components.

Navegació en React Native

Instal·lació de React Navigation

npm install @react-navigation/native
npm install @react-navigation/stack

Configuració de la navegació

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Exemple de pantalla

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Pantalla d'inici</Text>
      <Button
        title="Anar a Detalls"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default HomeScreen;

Accés a l'API nativa

Utilitzar el mòdul AsyncStorage

npm install @react-native-async-storage/async-storage

Exemple d'ús d'AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value);
  } catch (e) {
    // saving error
  }
};

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key');
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
};

Exercicis pràctics

Exercici 1: Crear un component de llista

Crea un component que mostri una llista d'elements utilitzant el component FlatList de React Native.

Exercici 2: Navegació entre pantalles

Implementa una navegació entre dues pantalles: una pantalla d'inici i una pantalla de detalls. La pantalla d'inici ha de tenir un botó que porti a la pantalla de detalls.

Exercici 3: Emmagatzematge local

Utilitza AsyncStorage per emmagatzemar i recuperar dades locals. Crea un formulari que permeti guardar un text i mostrar-lo en una altra pantalla.

Conclusió

En aquest tema, hem après els conceptes bàsics de React Native, com configurar l'entorn de desenvolupament, crear components bàsics, implementar la navegació i accedir a l'API nativa. Amb aquests coneixements, estàs preparat per començar a construir aplicacions mòbils amb React Native. En el següent mòdul, explorarem com gestionar l'estat de l'aplicació de manera eficient.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats