ScrollView เป็นคอนเทนเนอร์แบบเลื่อนที่สามารถรองรับส่วนประกอบและมุมมองได้หลายแบบ มันเป็นหนึ่งในองค์ประกอบหลักในการเกิดปฏิกิริยา และคุณสามารถเลื่อนทั้งในแนวตั้งและแนวนอนได้
ScrollView จะจับคู่กับอุปกรณ์ที่เทียบเท่ากันโดยอิงตามแพลตฟอร์มที่รันอยู่ ดังนั้นบน Android มุมมองจะจับคู่กับ
ตัวอย่างที่ 1:การเลื่อนแนวตั้งโดยใช้ ScrollView
ในตัวอย่างนี้ ScrollView มีมุมมองพร้อมกับองค์ประกอบข้อความและอยู่ภายในมุมมอง
ในการทำงานกับ ScrollView ให้นำเข้าส่วนประกอบก่อน -
import { Text, View, StyleSheet, ScrollView} from 'react-native';
ข้อมูลที่จะแสดงภายใน ScrollView จะถูกเก็บไว้ในชื่อในสถานะวัตถุดังที่แสดงด้านล่าง -
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} ] }
ข้อมูลเช่น this.state.names เป็นอาร์เรย์ มีการใช้เมธอด map() ในอาร์เรย์และแสดงชื่อภายใน View->Text Component ดังที่แสดงด้านล่าง -
<ScrollView> {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>)) } </ScrollView>
ScrollView ทำงานได้ดีที่สุดสำหรับข้อมูลแบบคงที่ซึ่งมีขนาดเล็ก แต่ถ้าคุณต้องการแก้ไขด้วยไดนามิกที่สามารถเป็นรายการขนาดใหญ่ได้ดีที่สุดเพื่อใช้ประโยชน์จากองค์ประกอบ FlatList
นี่คือรหัสเต็มสำหรับ 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' } })
ผลลัพธ์
ตัวอย่างที่ 2:การเลื่อนในแนวนอนโดยใช้ ScrollView
ตามค่าเริ่มต้น ScrollView จะแสดงข้อมูลในแนวตั้ง หากต้องการแสดงข้อมูลในแนวนอนให้ใช้อุปกรณ์ประกอบฉาก
แนวนอน={true} ดังแสดงด้านล่าง −
<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' } })
ผลลัพธ์