2.5.1 Props로 컴포넌트 스타일을 커스터마이징하기
이번에는 Props를 사용해 컴포넌트 스타일을 변경하는 방법을 알아보겠습니다.
2.5.1.1 부드러운 모서리 구현하기
먼저 rounded라는 Props를 준비해봅시다. 이 Props가 true일 때 사각형의 모서리를 부드럽게 나타내보겠습니다. Box 컴포넌트를 다음과 같이 수정해주세요.
components/Box.js
import React from 'react';
import {View, StyleSheet} from 'react-native';
function (props) {
return <View style={[styles.box, styles.rounded]} />;
}
const styles StyleSheet.({
box: {
width: 64,
height: 64,
backgroundColor: 'black',
},
rounded: {
borderRadius: 16,
},
});
export default Box;