[React Native TIL]IconButton, oneof, ScrollView

구글 Material Design 아이콘
https://fonts.google.com/icons?selected=Material+Icons:edit:&icon.query=edit&icon.platform=ios

oneof

무엇 중 하나를 설정하는 방법. 배열로 전달이 되어야 한다.

//icons.js
import Check from '../assets/icons/check.png';
import Uncheck from '../assets/icons/uncheck.png';
import Edit from '../assets/icons/edit.png';
import Delete from '../assets/icons/delete.png';

export const icons = {
    check: Check,
    uncheck: Uncheck,
    edit: Edit,
    delete: Delete,
};

위의 icons의 파일에서 oneof를 사용해서 하나의 값만 가지고 와야 하는데 객체형태이다. oneof에는 배열 형태가 들어가야 하기에 icons 객체에 있는 값만을 이용해서 proptypes를 설정해야 한다. Object.values를 이용해서 icons 객체에 있는 값들만 배열로 oneof를 적용시킴

Object.values() : 특정 객체를 대상으로 value값들만 뽑아서 배열로 반환

IconButton.PropTypes = {
    icon: PropTypes.oneOf(Object.values(icons)).isRequired,
    onPress: PropTypes.func,
};

ScrollView

react native에서 제공하는 scrollview 컴포넌트를 이용하면 많은 양의 데이터를 렌더링하고 화면에 넘어가면 스크롤을 생성시켜서 스크롤이 가능하도록 만들 수 있다.

const List = styled.ScrollView`
    flex: 1;
    width: 100%;
`;

ScrollView 컴포넌트로 스크롤할 리스트를 넣어주면 된다.

<List>
	<Task text='React Native' />
	<Task text='React Native1' />
	<Task text='React Native2' />
	<Task text='React Native3' />
 	<Task text='React Native4' />
	<Task text='React Native5' />
 	<Task text='React Native6' />
	<Task text='React Native7' />
	<Task text='React Native8' />
	<Task text='React Native9' />
 	<Task text='React Native10' />
	<Task text='React Native11' />
 	<Task text='React Native12' />
</List>