- React Native Elements는 React Native의 UI toolkit으로 화면을 구성하는데 도움을 주는 라이브러리이다.
- 3.4.2 버전을 기준으로 작성하지만, v4에서는 라이브러리 이름이 바뀌는 등 많은 변화가 있었다.
import React, { useState } from 'react';
import { Header } from 'react-native-elements';
const ElementsHeader = () => {
return (
<Header
leftComponent={{
icon: 'menu',
color: '#fff',
iconStyle: { color: '#fff' }
}}
centerComponent={{
text: 'MY TITLE',
style: { color: '#fff' }
}}
rightComponent={{
icon: 'home',
color: '#fff'
}}
/>);
}
import React, { useState } from 'react';
import { View } from "react-native";
import { Button, ButtonGroup, FAB } from 'react-native-elements';
const ElementsButtons = () => {
const [selectedIdx, setSelectedIdx] = useState(0);
return (
<View>
<Button
title='Enter'
type='clear'
onPress={() =>
Alert.alert("title",
"hi",
[{text: "YES"}, {text: "NO"}])}
/>
<ButtonGroup
buttons={["1", "2", "3", "4", "5"]}
onPress={(e) => setSelectedIdx(parseInt(e))}
selectedIndex={selectedIdx}
/>
<FAB title="Floating Action Button"/>
</View>);
}
Button은 solid, clear, outline과 같은 type props로 기본적인 디자인이 된 버튼을 제공한다.
ButtonGroup은 여러개의 버튼을 한 번에 만들 수 있는 기능을 제공한다.
buttons에 배열로 버튼의 이름들을 제공하고, selectedIndex props를 통해서 현제 선택된 버튼을 선택할 수 있게 해준다.
FAB는 Floating Action Button의 줄임말로 Button에서 사용가능한 모든 props를 동일하게 사용할 수 있게 해준다.
import React, { useState } from 'react';
import { View } from "react-native";
import { CheckBox } from 'react-native-elements';
const ElementsCheckBox = () => {
const [checked, setCheked] = useState(false);
return (
<CheckBox
center
title='Check Here'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked={checked}
onPress={() => setCheked(prev => !prev)}
/>;
}
CheckBox 컴포넌트에서는 체크박스가 선택되었을 떄 아이콘과 선택되지 않았을 떄 아이콘을 지정할 수 있다.
checked props와 onPress에 함수를 연결함으로써 상태를 관리할 수 있다.
import React, { useState } from 'react';
import { View, ActivityIndicator } from "react-native";
import { Icon } from 'react-native-elements';
const ElementsIcon = () => {
return (
<View>
<Icon name='rowing' />
<Icon
name='g-translate'
color='#00aced'
/>
<Icon
name='sc-telegram'
type='evilicon'
color='#517fa4'
/>
<Icon
reverse
name='ios-american-football'
type='ionicon'
color='#517fa4'
/>
<ActivityIndicator size="large" />
</View>
}
Icon 컴포넌트로 아이콘을 만들 수 있고, name을 통해서 이미지 종류를 정할 수 있다.
type으로 어떤 아이콘 종류를 사용할지 정할 수 있다.
네이티브의 내장 컴포넌트인 ActivityIndicator를 사용하면, 로딩 컴포넌트를 쉽게 구현할 수 있다.
import React, { useState } from 'react';
import { View } from "react-native";
import { Input } from 'react-native-elements';
const ElementsInput = () => {
return (
<View>
<Input
placeholder='INPUT WITH ICON'
leftIcon={{ type: 'font-awesome', name: 'comment' }}
/>
</View>
)
}
import React, { useState } from 'react';
import { View } from "react-native";
import { Overlay, Icon } from 'react-native-elements';
const ElementsOverlay = () => {
const [isVisible, setIsVisible] = useState(false);
return (
<View>
<Overlay
visible={isVisible}
onBackdropPress={() => setIsVisible(false)}
>
<Text>Overlay!</Text>
</Overlay>
<Icon
name='heartbeat'
type='font-awesome'
color='#f50'
onPress={() => setIsVisible(true)}
style={{padding: 15, margin: 20}}
/>
</View>
)
}
Overlay를 사용하여 화면에 컴포넌트를 띄울 수 있다.
위에서는 아이콘을 클릭하면 Overlay가 나타나고, Overlay 컴포넌트의 바깥을 클릭하면, 다시 Overlay가 사라진다.
import React, { useState } from 'react';
import { View } from "react-native";
import { PricingCard, Icon } from 'react-native-elements';
const ElementsPricingCard = () => {
return (
<View>
<PricingCard
color="#4f9deb"
title="Sale"
price="10,000원"
info={['1 Item', 'Sales', 'Features']}
button={{ title: 'GET', icon: 'flight-takeoff' }}
onButtonPress={() => alert("Clicked")}
/>
</View>
)
}
PricingCard는 가격에 대한 정보를 띄워주는 컴포넌트이다.
가격에 대한 정보, 가격, 버튼을 만들어 사용자가 쉽게 구매에 접근할 수 있도록 한다.
import React, { useState } from 'react';
import { View } from "react-native";
import { Tooltip } from 'react-native-elements';
const ElementsTooltip = () => {
return (
<View>
<Tooltip popover={<Text>Info here</Text>}>
<Text>Press me</Text>
</Tooltip>
</View>
)
}
Tooltip은 기존의 컴포넌트 위에 작게 나타나 추가적인 정보를 제공할 수 있다.
Tooltip에 popover props에 어떤 컴포넌트가 툴팁으로 나타날지 설정할 수 있게 해준다.
import React, { useState } from 'react';
import { ScrollView } from "react-native";
import { SpeedDial } from 'react-native-elements';
const ElementsSpeedDial = () => {
const [open, setOpen] = useState(false);
return (
<ScrollView>
<SpeedDial
isOpen={open}
icon={{ name: 'edit', color: '#fff' }}
openIcon={{ name: 'close', color: '#fff' }}
onOpen={() => setOpen(!open)}
onClose={() => setOpen(!open)}
>
<SpeedDial.Action
icon={{ name: 'add', color: '#fff' }}
title="Add"
onPress={() => console.log('Add Something')}
/>
<SpeedDial.Action
icon={{ name: 'delete', color: '#fff' }}
title="Delete"
onPress={() => console.log('Delete Something')}
/>
</SpeedDial>
</ScrollView>
);
}
export default ElementsSpeedDial;
SpeedDial을 통해서 사용자가 언제나 쉽게 접근할 수 있는 버튼을 만들 수 있다.
내부에 SpeedDial.Action으로 메뉴를 만들고 다양한 기능을 연결할 수 있다.
참고 자료 : https://reactnativeelements.com/