別ファイルにコードを入れてください

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

• app.js

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