Apakah komponen ScrollView dan cara menggunakannya dalam React Native?-tutorial js-php.cn

Apakah komponen ScrollView dan cara menggunakannya dalam React Native?

WBOY

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

ke hadapan

1400 orang telah melayarinya

ScrollView ialah bekas menatal yang boleh memuatkan berbilang komponen dan paparan. Ia adalah salah satu komponen teras dalam React Native dan menggunakannya untuk mencapai penatalan menegak dan mendatar.

ScrollView akan dipetakan kepada komponen asli yang sepadan mengikut platform yang sedang berjalan. Jadi pada Android, paparan memetakan ke , pada iOS ke , dan dalam persekitaran web ke

Contoh 1: Penatalan menegak menggunakan ScrollView

Dalam contoh ini, ScrollView mengandungi komponen Paparan dan Teks, dan ia dibalut dalam Paparan.

Untuk menggunakan ScrollView, anda perlu mengimport komponen terlebih dahulu −

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

Salin selepas log masuk

Data yang akan dipaparkan dalam ScrollView disimpan dalam nama objek keadaan seperti yang ditunjukkan di bawah −

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

Salin selepas log masuk

Data i.e keadaan ini. names ialah tatasusunan Kaedah map() digunakan pada tatasusunan dan nama dipaparkan di dalam View->Komponen Teks seperti yang ditunjukkan di bawah −

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

Salin selepas log masuk

ScrollView berfungsi paling baik untuk data statik yang bersaiz kecil. Tetapi jika anda ingin bekerja dengan dinamik yang boleh menjadi senarai besar yang terbaik untuk menggunakan komponen FlatList.

Berikut ialah kod penuh untuk 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'
   }
})

Salin selepas log masuk

Output

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

Contoh 2: Penatalan mendatar menggunakan ScrollView

Secara lalai, ScrollView memaparkan data secara menegak. Untuk memaparkan data secara mendatar, gunakan atribut berikut

horizontal={true} seperti yang ditunjukkan di bawah −

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

Salin selepas log masuk

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

Salin selepas log masuk

output

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

Atas ialah kandungan terperinci Apakah komponen ScrollView dan cara menggunakannya dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!