15.9.4 게시글 작성 버튼 만들기

WriteScreen의 헤더 우측에 작성 버튼을 만들어봅시다. navigation.setOptions를 통해서 작성 버튼을 다음과 같이 만들어보세요.

screens/WriteScreen.tsx

import {useNavigation} from '@react-navigation/core';
import React, {useCallback, useEffect, useState} from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  Pressable,
  StyleSheet,
  TextInput,
} from 'react-native';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import {RootStackNavigationProp} from './types';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

function WriteScreen() {
  const {top} = useSafeAreaInsets();
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const navigation = useNavigation<RootStackNavigationProp>();
  const onSubmit = useCallback(() => {
    // TODO: 구현 예정
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerRightContainerStyle: styles.headerRightContainer,
      headerRight: () => (
        <Pressable
          hitSlop={8}
          onPress={onSubmit}
          style={({pressed}) => pressed && styles.headerRightPressed}>
          <MaterialIcons name="send" color="#2196f3" size={24} />
        </Pressable>
      ),
    });
  }, [onSubmit, navigation]);

  (...)
}

const styles = StyleSheet.create({
  (...)
  headerRightContainer: {
    marginRight: 16,
  },
  headerRightPressed: {
    opacity: 0.75,
  },
});

export default WriteScreen;

Pressable을 사용할 때 터치할 수 있는 영역을 늘리기 위해 hitSlop을 사용했습니다. 코드를 저장하고 화면을 확인해보세요. 다음과 같이 게시글 작성 버튼이 나타났나요?

▲ 그림 15-13 게시글 작성 버튼