/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, Image, ScrollView } from "react-native";

export default class NewsList extends Component {
  render() {
    return (
      <ScrollView style={styles.container} automaticallyAdjustContentInsets={false}>
        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
        <ListItem title={"平安保险2017版"} context={"600万医疗报废，自费药，进口药，器材费"} />
      </ScrollView>
    );
  }
}

class ListItem extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.itemContainer}>
        <View style={styles.itemImgWrapper}></View>
        <View style={styles.itemRightWrapper}>
          <Text style={styles.itemTextTop}>{this.props.title}</Text>
          <Text style={styles.itemTextBottom}>{this.props.context}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    height:150,
  },
  itemContainer: {
    height: 90,
    backgroundColor: "#fff",
    flexDirection: 'row',
    alignItems: "center",
    borderTopWidth: 1,
    borderTopColor: "#EEEEEE",
    borderStyle: "solid",
    paddingLeft: 13,
    paddingRight: 13,
  },
  itemImgWrapper: {
    width:74,
    height:66,
    backgroundColor: "#ccc",
    marginRight: 12
  },
  itemRightWrapper: {
    justifyContent: "center",
    height: 66,
    flex: 1
    // marginRight: 13
  },
  itemTextTop: {
    fontSize: 16,
    color: "#202020",
    lineHeight: 21
  },
  itemTextBottom: {
    fontSize: 13,
    color: "#7A7A7A",
    lineHeight: 18
  },
});