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

Text, View i Image

Següent ►
►

En aquest tema, explorarem tres dels components bàsics més utilitzats en React Native: Text, View i Image. Aquests components són fonamentals per a la construcció d'interfícies d'usuari en aplicacions mòbils.

Text

El component Text s'utilitza per mostrar text a la pantalla. És un dels components més senzills però també un dels més importants.

Exemple bàsic de Text

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

const App = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default App;

Propietats del component Text

Algunes de les propietats més comunes del component Text són:

  • style: Permet aplicar estils al text.
  • numberOfLines: Limita el nombre de línies que es mostren.
  • onPress: Defineix una funció que s'executa quan es fa clic al text.

Exemple amb estils

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

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

export default App;

View

El component View és un contenidor que s'utilitza per agrupar altres components. És similar a un div en HTML.

Exemple bàsic de View

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

const App = () => {
  return (
    <View>
      <Text>First Text</Text>
      <Text>Second Text</Text>
    </View>
  );
};

export default App;

Propietats del component View

Algunes de les propietats més comunes del component View són:

  • style: Permet aplicar estils al contenidor.
  • onLayout: Defineix una funció que s'executa quan el layout del component canvia.

Exemple amb estils

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>First Text</Text>
      <Text>Second Text</Text>
    </View>
  );
};

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

export default App;

Image

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

Exemple bàsic d'Image

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

const App = () => {
  return (
    <View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: 50, height: 50 }}
      />
    </View>
  );
};

export default App;

Propietats del component Image

Algunes de les propietats més comunes del component Image són:

  • source: Defineix la font de la imatge.
  • style: Permet aplicar estils a la imatge.
  • resizeMode: Defineix com s'ha de redimensionar la imatge (cover, contain, stretch, repeat, center).

Exemple amb estils i resizeMode

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

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

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

export default App;

Exercicis pràctics

Exercici 1: Crear una pantalla amb text estilitzat

Objectiu: Crear una pantalla que mostri un text centrat amb estil personalitzat.

Instruccions:

  1. Crea un nou projecte de React Native.
  2. Utilitza el component Text per mostrar un missatge.
  3. Aplica estils per centrar el text i canviar el color i la mida de la font.

Solució:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: 'green',
  },
});

export default App;

Exercici 2: Crear una vista amb múltiples components

Objectiu: Crear una vista que contingui diversos components Text i Image.

Instruccions:

  1. Crea un nou projecte de React Native.
  2. Utilitza el component View per agrupar diversos components Text i Image.
  3. Aplica estils per organitzar els components dins de la vista.

Solució:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
      />
      <Text style={styles.text}>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: 'blue',
    margin: 10,
  },
  image: {
    width: 100,
    height: 100,
    margin: 10,
  },
});

export default App;

Conclusió

En aquest tema, hem après a utilitzar els components bàsics Text, View i Image en React Native. Aquests components són fonamentals per a la construcció d'interfícies d'usuari i es poden combinar i estilitzar de diverses maneres per crear aplicacions mòbils atractives i funcionals. En el proper tema, explorarem com estilitzar aquests components utilitzant Flexbox.

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