Qu'est-ce que le composant ScrollView et comment l'utiliser dans React Native ?

ScrollView est un conteneur défilant qui peut contenir plusieurs composants et vues. C'est l'un des composants principaux de React Native et l'utilise pour réaliser un défilement vertical et horizontal.

ScrollView sera mappé au composant natif correspondant en fonction de la plate-forme en cours d'exécution. Ainsi, sur Android, la vue correspond à , sur iOS à et dans un environnement Web à

.

Exemple 1 : Défilement vertical à l'aide de ScrollView

Dans cet exemple, ScrollView contient un composant View et un composant Text, et ils sont enveloppés dans une View.

Pour utiliser ScrollView, vous devez d'abord importer le composant −

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

Les données à afficher dans ScrollView sont stockées dans les noms de l'objet d'état comme indiqué ci-dessous −

state = {
   names: [
      {'name': 'Ben', 'id': 1},
      {'name': 'Susan', 'id': 2},
      {'name': 'Robert', 'id': 3},
      {'name': 'Mary', 'id': 4},
      {'name': 'Daniel', 'id': 5},
      {'name': 'Laura', 'id': 6},
      {'name': 'John', 'id': 7},
      {'name': 'Debra', 'id': 8},
      {'name': 'Aron', 'id': 9},
      {'name': 'Ann', 'id': 10},
      {'name': 'Steve', 'id': 11},
      {'name': 'Olivia', 'id': 12}
   ]
}

Les données, c'est-à-dire this.state. name est un tableau. La méthode map() est utilisée sur le tableau et le nom est affiché dans le composant View->Text comme indiqué ci-dessous −

<ScrollView>
   {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

ScrollView fonctionne mieux pour les données statiques de petite taille. vous souhaitez travailler avec une dynamique qui peut être une liste énorme, il est préférable d'utiliser le composant FlatList. Par défaut, ScrollView affiche les données verticalement. Pour afficher les données horizontalement, utilisez l'attribut suivant

horizontal={true} comme indiqué ci-dessous −

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from 'react-native';
class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Ben', 'id': 1},
         {'name': 'Susan', 'id': 2},
         {'name': 'Robert', 'id': 3},
         {'name': 'Mary', 'id': 4},
         {'name': 'Daniel', 'id': 5},
         {'name': 'Laura', 'id': 6},
         {'name': 'John', 'id': 7},
         {'name': 'Debra', 'id': 8},
         {'name': 'Aron', 'id': 9},
         {'name': 'Ann', 'id': 10},
         {'name': 'Steve', 'id': 11},
         {'name': 'Olivia', 'id': 12}
      ]
   }
   render(props) {
      return (
         
            
               {this.state.names.map((item, index) => ({item.name}))
            }
            
         
      );
   }
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      backgroundColor: '#d2f7f1'
   }
})

<ScrollView horizontal={true}>
   {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>

output

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn