Was ist die ScrollView-Komponente und wie wird sie in React Native verwendet?-js-Tutorial-php.cn

Was ist die ScrollView-Komponente und wie wird sie in React Native verwendet?

WBOY

Freigeben： 2023-08-24 18:01:08

nach vorne

1443 Leute haben es durchsucht

ScrollView ist ein Scroll-Container, der mehrere Komponenten und Ansichten enthalten kann. Es ist eine der Kernkomponenten in React Native und nutzt es, um vertikales und horizontales Scrollen zu erreichen.

ScrollView wird entsprechend der laufenden Plattform der entsprechenden nativen Komponente zugeordnet. Unter Android wird die Ansicht also zu , unter iOS zu und in einer Webumgebung zu

Beispiel 1: Vertikales Scrollen mit ScrollView

In diesem Beispiel enthält ScrollView eine Ansichts- und eine Textkomponente, die in eine Ansicht eingeschlossen sind.

Um ScrollView verwenden zu können, müssen Sie zunächst die Komponente importieren: −

import { Text, View, StyleSheet, ScrollView} from &#39;react-native&#39;;

Nach dem Login kopieren

Die in ScrollView anzuzeigenden Daten werden in den Namen des Statusobjekts gespeichert, wie unten gezeigt −

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}
   ]
}

Nach dem Login kopieren

Die Daten sind z. B. dieser.Zustand. „names“ ist ein Array. Die Methode „map()“ wird für das Array verwendet und der Name wird in der View->Text-Komponente angezeigt, wie unten gezeigt. −

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

Nach dem Login kopieren

ScrollView funktioniert am besten für statische Daten, die klein sind.Aber wenn Sie möchten mit Dynamik umgehen, die eine riesige Liste sein kann, und nutzen am besten die FlatList-Komponente.

Hier ist der vollständige Code für ScrollView.

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'
   }
})

Nach dem Login kopieren

Output

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

Beispiel 2: Horizontales Scrollen mit ScrollView

Standardmäßig zeigt ScrollView Daten vertikal an. Um die Daten horizontal anzuzeigen, verwenden Sie das folgende Attribut

horizontal={true} wie unten gezeigt: -

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

Nach dem Login kopieren

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,
      height:100,
      backgroundColor: '#d2f7f1'
   }
})

Nach dem Login kopieren

output

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

Das obige ist der detaillierte Inhalt vonWas ist die ScrollView-Komponente und wie wird sie in React Native verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!