ScrollView 구성 요소는 무엇이며 React Native에서 사용하는 방법은 무엇입니까?

가 됩니다.

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

출력