더북(TheBook)

이 컴포넌트에서 actions Props는 다음과 같은 값을 받아오겠습니다.

[
  {
    icon: 'camera-alt',
    text: '카메라로 촬영하기',
    onPress: () => {}
  },
  {
    icon: 'photo',
    text: '사진 선택하기',
    onPress: () => {}
  }
]

이렇게 버튼들의 정보를 지닌 배열을 사용해 모달 내부에서 버튼을 보여줍시다. ActionSheetModal을 마저 완성해보세요.

components/ActionSheetModal.js

(...)
function ActionSheetModal({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>
  );
}

(...)
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.