별도의 파일에 코드 삽입

Question

이 코드는 내 app.js 파일에 있습니다. 하지만) 별도의 파일에 넣고 app.js로 가져오고 싶습니다. 나는 React Native를 사용하고 있는데 어떻게 할 수 있습니까?

import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog'; 

<PopupDialog 
    ref={(popupDialog) => { this.popupDialog = popupDialog; }} 
    dialogAnimation={slideAnimation} 
    width={0.8} 
    hieght={0.4} 
    dialogStyle={{overflow: 'hidden',borderRadius: 10,}} > 

    <View style={{flex:1,alignItems:'center', backgroundColor: this.state.buttonBGColor,overflow: 'hidden',padding:0,}}> 
    <View style={{flex:1,flexDirection:'row',alignItems:'center' ,}}> 
     <Text style={{fontSize:30,color:this.state.buttonColor,fontFamily:'BoutrosMBCDinkum-Medium'}}> 
     test 
     </Text> 
    </View>   
    </View> 
</PopupDialog> 

Answer 1

ES6 모듈 구성표를 사용하여 모듈을 별도의 파일로 분리 할 수 ​​있습니다.

• Popup.js는

  import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog'; 
  
  export default class Popup extends React.Component { 
  <PopupDialog 
      ref={(popupDialog) => { this.popupDialog = popupDialog; }} dialogAnimation={slideAnimation} width={0.8} hieght={0.4} 
      dialogStyle={{overflow: 'hidden',borderRadius: 10,}} > 
      <View style={{flex:1,alignItems:'center', backgroundColor: this.state.buttonBGColor,overflow: 'hidden',padding:0,}}> 
      <View style={{flex:1,flexDirection:'row',alignItems:'center' ,}}> 
       <Text style={{fontSize:30,color:this.state.buttonColor,fontFamily:'BoutrosMBCDinkum-Medium'}}>test</Text> 
      </View> 
      </View> 
  </PopupDialog> 
  } 
  

• 도움을

import Popup from './Popup'; [Use <Popup /> here]