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

ScrollView i ListView

Següent ►
►

En aquest tema, aprendrem a utilitzar dos components essencials per a la visualització de llistes i continguts llargs en React Native: ScrollView i ListView. Aquests components ens permeten gestionar continguts que excedeixen la mida de la pantalla, oferint una experiència d'usuari fluida i eficient.

ScrollView

ScrollView és un component que permet als usuaris desplaçar-se per continguts que són més grans que la mida de la pantalla. És ideal per a continguts estàtics o llistes curtes.

Exemple bàsic de ScrollView

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

const ScrollViewExample = () => {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text}>Element 1</Text>
      <Text style={styles.text}>Element 2</Text>
      <Text style={styles.text}>Element 3</Text>
      <Text style={styles.text}>Element 4</Text>
      <Text style={styles.text}>Element 5</Text>
      <Text style={styles.text}>Element 6</Text>
      <Text style={styles.text}>Element 7</Text>
      <Text style={styles.text}>Element 8</Text>
      <Text style={styles.text}>Element 9</Text>
      <Text style={styles.text}>Element 10</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  text: {
    fontSize: 20,
    marginVertical: 10,
  },
});

export default ScrollViewExample;

Explicació del codi

  1. Importació de components: Importem ScrollView, Text i StyleSheet de react-native.
  2. Creació del component: Definim un component funcional ScrollViewExample.
  3. ScrollView: Utilitzem el component ScrollView per embolicar diversos elements Text.
  4. Estils: Definim estils bàsics per al contenidor i els textos.

Propietats importants de ScrollView

  • horizontal: Permet desplaçar-se horitzontalment.
  • showsVerticalScrollIndicator: Mostra o amaga l'indicador de desplaçament vertical.
  • contentContainerStyle: Estils per al contingut dins del ScrollView.

ListView

ListView és un component més avançat que ScrollView i està optimitzat per a llistes llargues. Tot i que ListView ha estat reemplaçat per FlatList i SectionList en versions més recents de React Native, és important conèixer-lo per a la compatibilitat amb projectes antics.

Exemple bàsic de ListView

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

const data = [
  { key: 'Element 1' },
  { key: 'Element 2' },
  { key: 'Element 3' },
  { key: 'Element 4' },
  { key: 'Element 5' },
];

class ListViewExample extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: ds.cloneWithRows(data),
    };
  }

  renderRow(rowData) {
    return (
      <View style={styles.row}>
        <Text style={styles.text}>{rowData.key}</Text>
      </View>
    );
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        style={styles.container}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  row: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  text: {
    fontSize: 20,
  },
});

export default ListViewExample;

Explicació del codi

  1. Importació de components: Importem ListView, Text, View i StyleSheet de react-native.
  2. Dades: Definim un array de dades.
  3. Constructor: Inicialitzem el dataSource de ListView en el constructor.
  4. renderRow: Definim una funció per renderitzar cada fila.
  5. render: Renderitzem el ListView amb el dataSource i la funció renderRow.

Propietats importants de ListView

  • dataSource: Font de dades per al ListView.
  • renderRow: Funció per renderitzar cada fila.
  • renderHeader i renderFooter: Funcions per renderitzar capçaleres i peus de pàgina.

Exercicis pràctics

Exercici 1: ScrollView amb imatges

Crea una aplicació que utilitzi ScrollView per mostrar una sèrie d'imatges.

Exercici 2: ListView amb dades dinàmiques

Crea una aplicació que utilitzi ListView per mostrar una llista de dades obtingudes d'una API.

Solucions

Solució a l'exercici 1

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

const images = [
  { uri: 'https://example.com/image1.jpg' },
  { uri: 'https://example.com/image2.jpg' },
  { uri: 'https://example.com/image3.jpg' },
];

const ScrollViewImages = () => {
  return (
    <ScrollView style={styles.container}>
      {images.map((image, index) => (
        <Image key={index} source={{ uri: image.uri }} style={styles.image} />
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  image: {
    width: '100%',
    height: 200,
    marginBottom: 20,
  },
});

export default ScrollViewImages;

Solució a l'exercici 2

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

class DynamicListView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
      data: [],
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(data),
        });
      });
  }

  renderRow(rowData) {
    return (
      <View style={styles.row}>
        <Text style={styles.text}>{rowData.name}</Text>
      </View>
    );
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        style={styles.container}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  row: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  text: {
    fontSize: 20,
  },
});

export default DynamicListView;

Conclusió

En aquest tema, hem après a utilitzar ScrollView i ListView per gestionar continguts llargs en React Native. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Ara estem preparats per avançar cap a la gestió de l'estat i el cicle de vida dels components en el següent mòdul.

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