이 컴포넌트에서 actions Props는 다음과 같은 값을 받아오겠습니다.
[ { icon 'camera-alt', text '카메라로 촬영하기', () => {} }, { icon 'photo', text '사진 선택하기', () => {} } ]
이렇게 버튼들의 정보를 지닌 배열을 사용해 모달 내부에서 버튼을 보여줍시다. ActionSheetModal을 마저 완성해보세요.
components/ActionSheetModal.js
(function ({visible, onClose, actions}) { return ( <Modal visible={visible} transparent={true} animationType="fade" onRequestClose={onClose}> <Pressable style={styles.background} onPress={onClose}> <View style={styles.whiteBox}> {actions.map((action) => ( <Pressable style={styles.actionButton} android_ripple={{color: '#eee'}} onPress={() => { action.onPress(); onClose(); }} key={action.text}> <Icon name={action.icon} color="#757575" size={24} style={styles.icon} /> <Text style={styles.actionText}>{action.text}</Text> </Pressable> ))} </View> </Pressable> </Modal> ); } ( ))