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);