15.9.1 게시글 작성 버튼 준비하기

우선 WriteButton을 만들어봅시다. 이 컴포넌트는 추후 Articles 컴포넌트의 FlatList에서 ListHeaderComponent로 사용할 예정입니다.

WriteButton 컴포넌트를 다음과 같이 생성하세요.

components/WriteButton.tsx

import React from 'react';
import {StyleSheet, Pressable, Platform, Text} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

function WriteButton() {
  const onPress = () => {
    // TODO: 구현 예정
  };
  return (
    <Pressable
      style={({pressed}) => [
        styles.button,
        Platform.OS === 'ios' && pressed && styles.pressed,
      ]}
      android_ripple={{color: '#eeeeee'}}
      onPress={onPress}>
      <MaterialIcons name="add-circle" size={24} />
      <Text style={styles.text}>새 게시글 작성</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    borderBottomColor: '#cfd8dc',
    borderBottomWidth: 1,
    paddingVertical: 16,
    paddingHorizontal: 12,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  text: {
    marginLeft: 8,
  },
  pressed: {
    backgroundColor: '#eeeeee',
  },
});

export default WriteButton;