스크롤

· React Native
TextInput에 내용이 많아졌을때 기본적으로 보여줄 수 있는 줄 수를 초과할 경우, 안드로이드에서는 별 문제없이 스크롤할 수 있지만, iOS에서는 하단 내요이 잘리게 된다. 따라서 KeyboardAvoidingView로 컴포넌트 내부의 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다. KeyboardAvoidingView를 적용하지 않고 많은 내용을 작성했을때 iOS의 화면을 확인해보겠다. 키보드가 작성한 내용을 가리는 것을 확인할 수 있다. 이번엔 KeyboardAvoidingView를 적용해보자. import React from "react"; import { KeyboardAvoidingView, Platform, StyleSheet } from "r..
· React Native
FlatList 사용 예제 리액트 네이티브에서 배열 안에 들어있는 원소들을 보여줄때 FlatList 컴포넌트를 사용하기도 한다. 아래 예제 코드에 설정값을 보며 설명을 정리해보겠다. import React from 'react'; import {View, Text, FlatList, StyleSheet, Image} from 'react-native'; function FlatListTest() { const todos = [ {id: 1, text: '샤워하기', done: true}, {id: 2, text: '기술 공부하기', done: false}, {id: 3, text: '독서하기', done: false}, ]; return ( } renderItem={({item}) => ( {item.d..
beekei
'스크롤' 태그의 글 목록