React Native - render()의 코드를 다른 함수로 이동

Question

React native를 처음 사용합니다. render()라는 주요 함수에서 코드를 옮겨서 코드를 다른 함수에 넣는 것과 관련된 멍청한 질문이 있습니다.

은 이제 나는 다음과 같은 코드가 있다고 가정 해 봅시다 : -

render() { 
return (
    <View> 

    <Modal 
    animationType={"fade"} 
    transparent={true} 
    visible={this.state.signUpPopUpVisible} 
    onRequestClose={() => {alert("Modal has been closed.")}}> 
     {/* Other modal codes */} 
    </Modal> 

    <View style={styles.mainView}> 
     {/* Other mainView codes */} 
    </View> 

    </View> 
); 

} 

이 어떻게 다른 기능으로 전체 코드

<Modal 
    animationType={"fade"} 
    transparent={true} 
    visible={this.state.signUpPopUpVisible} 
    onRequestClose={() => {alert("Modal has been closed.")}}> 
     {/* Other modal codes */} 
    </Modal> 

를 이동하고 (렌더링에서 호출 할 수 있습니다)?

감사합니다. 당신이 이런 식으로 일을 시도 할 수 있습니다

Answer 1

는

showModal =() => { 
    return (<Modal 
     animationType={"fade"} 
     transparent={true} 
     visible={this.state.signUpPopUpVisible} 
     onRequestClose={() => { alert("Modal has been closed.") } }> 
     {/* Other modal codes */} 
    </Modal>); 
    } 
    render() { 
    return (
     <View> 
     {this.showModal()} 
     <View style={styles.mainView}> 
      {/* Other mainView codes */} 
     </View> 
     </View> 
    ); 
    } 

Answer 2

당신이 필요로하는 당신이 렌더링 않았다 동일하게 다른 함수 내에서 개체를 반환하는 것입니다.

예 : 코드의

yourFunction(){ 
    return(
    <View></View> 
); 
} 

샘플 :

render() { 
return (
    <View> 
     {this._renderModal()} 
     <View style={styles.mainView}> 
      {this._renderMainViewCode()}/* Other mainView codes */ 
     </View> 
    </View> 
); 
} 

_renderModal(){ 
    return(
    <Modal 
     animationType={"fade"} 
     transparent={true} 
     visible={this.state.signUpPopUpVisible} 
     onRequestClose={() => {alert("Modal has been closed.")}}> 
     {this._renderModalCode()}/* Other modal codes */ 
    </Modal> 
); 
} 

_renderModalCode(){ 
    return(
    <Text>This is the modals code</Text> 
); 
} 

_renderMainViewCode(){ 
    return(
    <Text>This is the main views code</Text> 
); 
}