[React-Native] 커스텀 버튼 제작

React-Native 커스텀 버튼 제작

리스트의 컴포넌트를 추가해줄 동그란 + 버튼이 필요했다.

<TouchableOpacity>를 이용하여 버튼 효과를 주기로 했다.

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';

export default class RoundButton extends Component {
    render() {
        return (
            <TouchableOpacity style={styles.button}>
                <Text style={styles.text}>{this.props.text}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        backgroundColor: 'green',
        alignItems: 'center',
        justifyContent: 'center',
        width: 70,
        height: 70,
        marginBottom: 30,
        borderRadius: 35,
        

        ...Platform.select({
            ios: {
                shadowColor: 'rgba(0,0,0,0.2)',
                shadowOpacity: 1,
                shadowOffset: {height: 2, width: 2},
                shadowRadius: 2,
            },

            android: {
                elevation: 0,
                marginHorizontal: 30,
            },
        })
    },

    text: {
        fontSize: 30,
        textAlign: 'center',
        color: 'white'
    }
});

+ 버튼을 위한 것이라서 기본 배경색은 초록색(green)으로 했다.

텍스트의 중앙 정렬을 위해서 alignItems, justifyContent의 속성을 'center'로 주었다.

동글동글한 버튼 모양을 위해서 borderRadius의 속성을 35로 했다.

 

---

결과

리스트 요소 추가를 위한 + 버튼이다.

성공적으로 버튼이 만들어졌다. 그림자 효과도 줘 보았다.