有兩個文件,app.js和new.js;其中new.js中建了一個類New2019;
在app.js中調用類New2019,有兩種方式如下:
- var Header2019=require("./header");
- import {Header2019} from './header';
在new.js文件中引出該類
module.exports=New2019;
1.首先創建new.js文件
class New2019 extends Component<Props> {
show(title) {
alert(title);
};
render(){
//定義數組,用於存儲設置Text組件;
var newsComponents=[];
for (var i in this.props.news) {
var text= (
<Text
onPress={this.show.bind(this,this.props.news[i])}
style={styles.news_item}
nemberOfLines={2}
key={i}>
{this.props.news[i]}
</Text>
);
newsComponents.push(text);
};
return (
<View style={styles.flex}>
<Text style={styles.news_title}>今日要聞</Text>
{newsComponents}
</View>
);
}
};
var styles=StyleSheet.create({
flex:{
flex:1,
},
news_title:{
fontSize:20,
fontWeight:"bold",
color:"#CD1D1C",
marginLeft:10,
marginTop:15,
},
news_item:{
marginTop:10,
marginLeft:10,
marginRight:10,
fontSize:15,
lineHeight:30,
},
});
module.exports=New2019;
2.在app.js裏面調用
var Header2019=require("./header");
var New2019=require("./new");
//import {Header2019} from './header';
export default class App extends Component<Props> {
render() {
var news=[
"1.快速瞭解微信小程序",
"2.快速瞭解APP開發",
"3.快速瞭解RN開發"
];
return (
<View style={styles.container}>
<ScrollView>
<Header2019></Header2019>
<New2019 news={news}></New2019>
<AntDesign name={'stepforward'} size={50} style={{color:'red'}}></AntDesign>
</ScrollView>
</View>
);
}
}