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