[React Native] 스크롤 만들기

리액트 네이티브로 작업을 하는 중 렌더될 화면이 스크린을 넘어갔는데 스크롤 생성이 되지 않아 곤란한 상황이 생긴적이 있을것이다. 공식 사이트의 예시와 함께 간단히 해결해 보겠다.

ScrollView를 사용하면 된다.
코드의 상단에 아래와 같이 ScrollView를 선언해주고
import {ScrollView} from 'react-native';

아래와 같이 스크롤 되길 희망하는 부분에 <ScrollView> 테그를 열고 닫아주면 된다.

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

여기 를 클릭하여 공식 사이트에서 스크롤 처리된 예시를 확인해보자!

스크롤 문제 간단히 해결 완료 !

꾸준히 공부하고 기록하여 훌륭한 개발자가 되도록 하자!