Thành phần ScrollView là gì và cách sử dụng nó trong React Native?

trên môi trường web.

Ví dụ 1:Cuộn dọc bằng ScrollView

Trong ví dụ này, ScrollView có Chế độ xem cùng với thành phần Văn bản và nó được bao bọc bên trong Chế độ xem.

Để làm việc với ScrollView, hãy nhập thành phần trước -

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

Dữ liệu được hiển thị bên trong ScrollView được lưu trữ bên trong các tên trong đối tượng trạng thái như được hiển thị bên dưới -

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

Dữ liệu tức là this.state.names là một mảng. Phương thức map () được sử dụng trên mảng và tên được hiển thị bên trong View-> Text Component như hình dưới đây -

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

ScrollView hoạt động tốt nhất đối với dữ liệu tĩnh có kích thước nhỏ, nhưng nếu bạn muốn làm việc với dữ liệu động có thể là một danh sách lớn, tốt nhất nên sử dụng thành phần FlatList.

Đây là mã đầy đủ cho ScrollView.

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 (
         <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <ScrollView>
               {this.state.names.map((item, index) => (<View key = {item.id} style =       {styles.item}><Text>{item.name}</Text></View>))
            }
            </ScrollView>
         </View>
      );
   }
}
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'
   }
})

Đầu ra

Ví dụ 2:Cuộn theo chiều ngang bằng ScrollView

Theo mặc định, ScrollView hiển thị dữ liệu theo chiều dọc. Để hiển thị dữ liệu theo chiều ngang, hãy sử dụng các đạo cụ

ngang ={true} như hình dưới đây -

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

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 (
            <View style={{flex :1, justifyContent: 'center', marginTop: 100 }}>
            <ScrollView horizontal={true}>
               {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
            }
            </ScrollView>
         </View>
      );
   }
}
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'
   }
})

Đầu ra