다 만든 다음에는 이 컴포넌트를 ArticleActionButtons 컴포넌트에서 사용해주세요.
components/ArticleActionButtons.tsx
import {useNavigation} from '@react-navigation/core'; import React, {useState} from 'react'; import {View, StyleSheet, Pressable, Text} from 'react-native'; import {RootStackNavigationProp} from '../screens/types'; import AskDialog from './AskDialog'; export interface ArticleActionButtonsProps { articleId ; } function ({articleId} ArticleActionButtonsProps) { const [askRemove, setAskRemove] = useState(false); const navigation <RootStackNavigationProp>(); const () => { navigation. ('Write', {articleId}); }; const () => { setAskRemove(true); }; const onCancelRemove = () => { setAskRemove(false); }; const onConfirmRemove = () => { setAskRemove(false); }; return ( <> <View style={styles.block}> <Pressable style={({pressed}) => pressed && styles.pressed} onPress={onPressModify}> <Text style={styles.buttonText}>수정</Text> </Pressable> <View style={styles.separator} /> <Pressable onPress={onPressRemove} style={({pressed}) => pressed && styles.pressed}> <Text style={styles.buttonText}>삭제</Text> </Pressable> </View> <AskDialog visible={askRemove} title="게시글 삭제" message="게시글을 삭제하시겠습니까?" isDestructive confirmText="삭제" onConfirm={onConfirmRemove} onClose={onCancelRemove} /> </> ); } ( )