3.2.3 커스텀 버튼 만들기

항목을 추가하는 버튼을 AddTodo에 만들어봅시다. 이번에는 일반 Button 컴포넌트를 사용하지 않고, 원하는 디자인을 가진 커스텀 버튼을 직접 만들어보겠습니다.

다음과 같이 View와 Image를 사용해 버튼을 만들어보세요. 이번에 사용할 이미지는 add_white.png입니다.

components/AddTodo.js

import React, {useState} from 'react';
import {View, StyleSheet, TextInput, Image} from 'react-native';

function AddTodo() {
  const [text, setText] = useState('');

  return (
    <View style={styles.block}>
      <TextInput
        placeholder="할일을 입력하세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
      />
    <View style={styles.buttonStyle}>
      <Image source={require('../assets/icons/add_white/add_white.png')} />
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    backgroundColor: 'white',
    height: 64,
    paddingHorizontal: 16,
    borderColor: '#bdbdbd',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    alignItems: 'center',
    flexDirection: 'row',
  },
  input: {
    flex: 1,
    fontSize: 16,
    paddingVertical: 8,
  },
  buttonStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 48,
    height: 48,
    backgroundColor: '#26a69a',
    borderRadius: 24,
  },
});

export default AddTodo;