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

Visió general dels components bàsics

Següent ►
►

En aquest tema, explorarem els components bàsics de React Native, que són els blocs de construcció fonamentals per a qualsevol aplicació. Aquests components ens permeten crear interfícies d'usuari (UI) riques i interactives. Els components bàsics que tractarem inclouen:

  1. View
  2. Text
  3. Image
  4. Button
  5. TextInput

  1. View

El component View és un dels components més utilitzats en React Native. És similar a un div en HTML i s'utilitza per contenir altres components i aplicar estils.

Exemple de codi:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hola, món!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

export default App;

Explicació:

  • View: Conté el component Text.
  • styles.container: Aplica estils al View, centrant el contingut tant horitzontalment com verticalment.

  1. Text

El component Text s'utilitza per mostrar text a la pantalla. Pot contenir estils i altres components Text.

Exemple de codi:

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

const App = () => {
  return (
    <Text style={styles.text}>
      Benvingut a React Native!
    </Text>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

Explicació:

  • Text: Mostra el text "Benvingut a React Native!".
  • styles.text: Aplica estils al text, canviant la mida de la font i el color.

  1. Image

El component Image s'utilitza per mostrar imatges a la pantalla. Pot carregar imatges des de fonts locals o remotes.

Exemple de codi:

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

const App = () => {
  return (
    <Image
      style={styles.image}
      source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
    />
  );
};

const styles = StyleSheet.create({
  image: {
    width: 50,
    height: 50,
  },
});

export default App;

Explicació:

  • Image: Mostra una imatge des d'una URL remota.
  • styles.image: Defineix l'amplada i l'alçada de la imatge.

  1. Button

El component Button s'utilitza per crear botons interactius. Té propietats com title i onPress per definir el text del botó i la funció que es crida quan es prem el botó.

Exemple de codi:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Button
        title="Prem-me"
        onPress={() => Alert.alert('Botó premut!')}
      />
    </View>
  );
};

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

export default App;

Explicació:

  • Button: Crea un botó amb el text "Prem-me".
  • onPress: Defineix una funció que mostra una alerta quan es prem el botó.

  1. TextInput

El component TextInput s'utilitza per crear camps de text on l'usuari pot introduir dades.

Exemple de codi:

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

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escriu aquí"
        onChangeText={setText}
        value={text}
      />
      <Text style={styles.text}>
        Has escrit: {text}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
  },
});

export default App;

Explicació:

  • TextInput: Crea un camp de text amb un marcador de posició "Escriu aquí".
  • onChangeText: Actualitza l'estat text cada vegada que l'usuari escriu.
  • value: Mostra el valor actual del text introduït.

Resum

En aquesta secció, hem après sobre els components bàsics de React Native: View, Text, Image, Button i TextInput. Aquests components són essencials per construir interfícies d'usuari en aplicacions React Native. Hem vist exemples pràctics de com utilitzar cada component i com aplicar estils bàsics. En el proper tema, aprofundirem en l'ús de Text, View i Image per crear interfícies més complexes.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats