React-native学习-17-动手写组件
这是效果图：
//重点状态和属性
import React, { useState, Component } from 'react';
import { View, Text, Button, Alert, StyleSheet, ScrollView } from 'react-native';
class Article extends Component {
render() {
return (
<View style={styles.container}>
<Text style={[styles.text, styles.title]}>{this.props.title}</Text>
<Text style={styles.text}>{this.props.author}</Text>
<Text style={styles.text}>{this.props.time}</Text>
</View>
);
}
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
title: "为什么世界不一样",
author: "vczero",
time: "2015-06-8",
articles: [
{
title: "React-Native入门指南",
author: "vczero",
time: "2015-06-28"
},
{
title: "为什么世界不一样",
author: "vczero",
time: "2015-06-8"
},
{
title: "你来，我就告诉你",
author: "vczero",
time: "2015-04-01"
}
]
}
};
render() {
return (
<View>
<Text>hello</Text>
<ScrollView>
{this.state.articles.map(function (article) {
return <Article title={article.title} author={article.author} time={article.time} />
})}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
text: {
fontSize: 20,
color: '#000'
}
});
export default App;
以上是 React-native学习-17-动手写组件 的全部内容， 来源链接： utcz.com/z/383323.html
