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]

将代码放在单独的文件中反应原生

1 个答案: