2017-10-14 10 views
0

나는 웹상에서 ReactJS에 사용 된 컴포넌트를 기반으로 Modal을 만들고있다. 나는 Modal을 자식으로 document.body에 첨부하고 필요에 따라 마운트/마운트 해제합니다. 여기 ReactDOM 및 document.body에 대해 React Native의 동등한 변수는 무엇입니까? (엑스포)

다이어그램 (스티븐 거더의 Udemy 온라인 과정) enter image description here

내 문제가 더 ReactDOM이 없습니다 또는는 document.body 기본 반작용이다.은 여기 내 modal.py

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { store } from '../store'; 
import { Provider } from 'react-redux'; 
class Modal extends Component { 
    comoponentDidMount() { 
    this.modalTarget = document.createElement('div'); 
    this.modalTarget.className = 'modal'; 
    document.body.appendChild(this.modalTarget); 
    this._render(); 
    } 

    _render() { 
    ReactDOM.render(
     <Provider store={store}> 
     <div>{this.props.children}</div> 
     </Provider>, 
     this.modalTarget 
    ); 
    } 

    componentWillUpdate() { 
    this._render(); 
    } 

    componentWillUnmount() { 
    ReactDOM.unmountComponentAtNode(this.modalTarget); 
    document.body.removeChild(this.modalTarget); 
    } 

    render() { 
    return <noscript />; 
    } 
} 

내가 엑스포를 사용하고 있는데 기본적으로 App.js를로드하는 것입니다! 그리고 문서가 없습니다 .body와 ReactDOM. 이 문제를 어떻게 해결할 수 있습니까?

답변

1

반응 네이티브에는 DOM이 없습니다. 모달 구성 요소를 만들어 사용하려는 다른 구성 요소로 가져와야합니다. 당신의 모달의 위치는 절대적이어야하며, 모달을 보이기 위해서 당신은 그것을지지 할 수 있습니다. 이 같은 사람들에 의해 만들어 https://facebook.github.io/react-native/docs/modal.html 또는 기타 조동사 : 내가 모달이 화면에서 CSS에 의해 위치 얻을 싶지 않았다 https://github.com/maxs15/react-native-modalbox

+0

사용할 수

는 기본 모달 반응. 저는 모달을 나타 내기 위해 z- 색인을 다루어야합니다. 내 접근 방식은 신체의 아이를 만들어서 CSS 문제를 해결하는 것입니다. 또한 구성 요소의 가짜 모달은 본문에 첨부 된 모달을 호출합니다. –

+0

답변 해 주셔서 감사합니다. 내 문제에 시간을 내 주셔서 감사합니다. –