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;