React Native List列表

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

const Header=require('./header');

class FirstRN extends Component {
  render() {
    return (
        <View style={styles.flex}>
          <Header></Header>
          <List title="一线城市楼市退烧 有房源一夜跌价160万"></List>
          <List title="上海市民称墓地太贵买不起 买房存骨灰"></List>
          <List title="朝鲜再发视频:摧毁青瓦台 一切化作灰机"></List>
          <List title="生活大爆炸任务原型都好牛掰"></List>
          <ImportantNews news={['一线城市楼市退烧 有房源一夜跌价160万',
                                  '上海市民称墓地太贵买不起 买房存骨灰',
                                  '上海市民称墓地太贵买不起 买房存骨灰',
                                  '上海市民称墓地太贵买不起 买房存骨灰上海市民称墓地太贵买不起 买房存骨灰上海市民称墓地太贵买不起 买房存骨灰上海市民称墓地太贵买不起 买房存骨灰',
                                  '上海市民称墓地太贵买不起 买房存骨灰上海市民称墓地太贵买不起 买房存骨灰上海市民称墓地太贵买不起 买房存骨灰',
                                  '上海市民称墓地太贵买不起 买房存骨灰'
                                  ]}>
          </ImportantNews>
        </View>


    );
  }
}

class List extends  Component {
    render() {
      return (
          <View style={styles.list_item}>
            <Text style={styles.list_item_font}>{this.props.title}</Text>
          </View>
          //{this.props.title} 属性的传递
      );
    }

}

class ImportantNews extends Component {

  //方法
  show(title) {
    alert(title);
  }

  render() {//渲染的方法

    var news = [];//定义数组
    for(var i in this.props.news) {//循环
      var  text = (
          <Text onPress={this.show.bind(this, this.props.news[i])}
                numberOfLines={2}
                style={styles.news_item}
                key={i}>

            {this.props.news[i]}
          </Text>

      );
      news.push(text);//添加到news数组中
    }

   return(
       <View style={styles.flex}>
          <Text style={styles.news_title}>今日要闻</Text>
         {news}
       </View>

   );
  }
}

const styles = StyleSheet.create({
    flex: {
      flex: 1,
    },
    list_item: {
      height: 40,     //高度
      marginLeft: 10, //左边距
      marginRight:10, //右边距
      borderBottomWidth: 1, //底部边框
      borderBottomColor: '#ddd', //底部边框颜色
      justifyContent: 'center', //justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
    },
    list_item_font: {
      fontSize: 16, //字体大小
    },

    news_title: {
      fontSize: 20,
      fontWeight: 'bold',
      color: '#CD1D1C',
      marginRight: 10,
      marginLeft: 10,
      marginTop: 10,
    },
    news_item: {
      marginLeft: 10,
      marginRight: 10,
      fontSize: 15,
      lineHeight: 40,//line-height 属性设置行间的距离（行高）。注释：不允许使用负值。
      borderBottomWidth: 1, //底部边框
      borderBottomColor: '#ddd', //底部边框颜色

    },
});
AppRegistry.registerComponent('FirstRN', () => FirstRN);