ScrollView는 여러 구성 요소와 보기를 수용할 수 있는 스크롤 컨테이너입니다. 반응형의 핵심 구성 요소 중 하나이며 이를 사용하여 세로 및 가로로 스크롤할 수 있습니다.
ScrollView는 실행 중인 플랫폼에 따라 기본 항목에 매핑됩니다. 따라서 Android에서는 보기가
가 됩니다.
예시 1:ScrollView를 사용한 수직 스크롤
이 예에서 ScrollView에는 Text 구성 요소와 함께 View가 있으며 View 내부에 래핑됩니다.
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는 데이터를 세로로 표시합니다. 데이터를 가로로 표시하려면 props를 사용하세요.
수평={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' } })
출력