React Native - render（）のコードを別の関数に移動

Question

Reactネイティブが初めてです。私は、render（）であるメイン関数からコードを移動して、別の関数にコードを移すことに関連して、noobの質問をしています。

はのは、私は次のコードを持っているとしましょう： -

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> 
); 
}