React Native Elements에 대해서

citron03·2022년 10월 8일
0

React Native

목록 보기
4/7
  • 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' 
                }}
            />);
}
  • Header 컴포넌트는 왼쪽과 가운데, 우측에 추가적으로 컴포넌트를 연결하여 상단에 앱의 헤더 정보를 표시할 수 있게 해준다.
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>
        )
}
  • react-native-elements의 Input 컴포넌트를 사용함으로써, Input 내부에 쉽게 Icon을 삽입할 수 있다.
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/

profile
🙌🙌🙌🙌

0개의 댓글