Qu'est-ce que le composant ScrollView et comment l'utiliser dans React Native ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-24 18:01:08

avant

1423 Les gens l'ont consulté

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 &#39;react-native&#39;;

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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 &#39;react-native&#39;;
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'
   }
})

Copier après la connexion

ScrollView组件是什么，如何在React Native中使用它？

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

Copier après la connexion

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!