Modal 페이지 생성을 함수내에서 할 수 있을까요?

modal 페이지 생성 함수를 따로 만들어서 사용하고 싶습니다.
예를 들어
setModalPage = () => {
<Modal isVisible={this.state.CalendarVisible} } onBackdropPress={() => { this.toggleCalendarModal() }} > < View style={this.style.modal_container} > < /View> < /Modal>
}
이런 식으로 함수를 생성해서 특정버튼 클릭 시 onpress를 통해 함수를 호출하여 사용하고 싶은데 모달창이 띄워지질 않네요 모달창을 뷰로 감싸주지 않아서 그런걸까요?
뷰로 따로 감싸줘야 한다면 함수 바깥에 있는 뷰에 특정 아이디를 부여한 후 그 아이디를 이용하여
setmodalpage 함수 내에서 사용할 수 있는 방법이 있을까요?
리액트 초보라 개념도 제대로 정립되어 있지 않아 너무 힘드네요…ㅠ
방법 아시는 분 알려주시면 정말 감사하겠습니다…ㅠ

모달을 공용 컴포넌트로 쓰시려면 이렇게 쓰시는 것이 적당합니다.

예)
modal.js

import Modal from 'react-native-modal'
import React from 'react'
import { View } from 'react-native'

const Modal = ({ show, onClose, children }) => {
  <Modal isVisible={show} onBackdropPress={onClose}>
    <View style={this.style.modal_container}>
      {children}
    </View>
  </Modal>
}

export default Modal

App.js

import Modal from './modal'
import React, { useState } from 'react'
import { SafeAreaView, Button, Text, View } from 'react-native'

const App = () => {
  const [showModal, setShowModal] = useState(false);
  
  const onClose = () => {
    setShowModal(false);
  }

  return (
    <SafeAreaView>
      <Button 
        onPress={() => setShowModal(true)}
        title="모달 켜기"
      />
      <Modal show={showModal} onClose={onClose}>
        <View>
          <Text>모달 내용</Text>
        </View>
      </Modal>
    </SafeAreaView>
  )
}

답변 정말 감사합니다. 그런데 현재 제 코드가
function 1() {
return(
<touchableopacity onpress={() => setModalPage()}>
~

);
}
이런식으로 되어 있습니다. 메인 컨테이너는 바깥에 따로 빼놨고 function1이 반복되서 실행되게 짜여있어서 모달을 뷰안에 넣을수가 없습니다. 그래서 함수로 따로 만들어서 실행하려고 한것인데 불가능한건가요?..

잘 이해가 되지 않습니다. <TouchableOpacity onPress={..}> 을 누르면 모달이 켜진다는 건 알겠는데 function1이 반복되서 실행되게 짜여있다는게 어떤 의미인가요?

function2에서 반복문을 이용해서 function1을 여러번 호출시키고 있거든요. 그래서 function1 return에서 모달창을 선언하면 오류가 납니다…

function Two({ buttons }) {
  const [modalPage, setModalPage] = useState(0);

  const modalContents = (pageNum) =>  {
    switch (pageNum) {
      case 1:
        return <View><Text>Modal Contents 1</Text></View>
      case 2:
        return <View><Text>Modal Contents 2</Text></View>
      ...
      default:
        return null
     }
  }

  return (
    <View>
      {buttons.map((btn, index) => (
         <One key={btn} index={index}>
      )}
      <Modal
        show={modalPage}
        onClose={() => setModalPage(0)}
        contents={modalContents(modalPage)}
      />
    </View>
  )
}

function One({ index }) {
  return(
    <Touchableopacity onpress={() => setModalPage(index + 1)}>
      <View>
         <Text>Button Text {index}</Text>
       </View>
     </Touchableopacity>
  );
}

const Modal = ({ show, onClose, contents }) => {
  <Modal isVisible={!!show} onBackdropPress={onClose}>
    <View style={this.style.modal_container}>
      {contents}
    </View>
  </Modal>
}

이런식으로 컨텐츠를 따로 함수로 만드셔서 prop으로 넘겨주시면 될 것 같습니다

와…정말 감사합니다 새벽인데도 상세하게 답변 달아주시고 절말 감사합니다…낮에 올려주신 코드 참고하여 해결해보겠습니다ㅠㅠ

1 Like