本章节主要学习Text的布局，仿照网易新网：

代码：

1 /**  2  * Sample React Native App  3  * https://github.com/facebook/react-native  4  * @flow  5  */  6   7 import React, { Component } from 'react';  8 import {  9   AppRegistry, 10   StyleSheet, 11   PixelRatio, 12   Text, 13   View 14 } from 'react-native'; 15  16 const Header=require('./header'); 17  18 export default class HelloWord extends Component { 19   render() { 20     return (  21       
     
       22         
      
 23         
       24         
       25         
       26         
       27         
       34      
      35     ); 36   } 37 } 38  39 class ImportantNews extends Component{ 40   show(title){ 41     alert(title) 42   } 43   render(){ 44     var news=[]; 45     for(var i in this.props.news){ 46       var text=( 47         
     
      {this.props.news[i]}
      52       ); 53       news.push(text); 54     } 55  56     return ( 57       
     
       58         
      
       今日要闻
       59         {news} 60       
      61     ); 62   } 63 } 64  65 class HotNews extends Component{ 66   render(){ 67     return ( 68       
     
       69         
      
       {this.props.title}
       70       
      71     ); 72   } 73 } 74  75 const styles = StyleSheet.create({ 76   body:{ 77     flex:1, 78   },   79   list_item:{ 80     height:40, 81     marginLeft:10, 82     marginRight:10, 83     borderBottomWidth:1, 84     borderBottomColor:'#ddd', 85     justifyContent:'center', 86   }, 87   list_item_font:{ 88     fontSize:16, 89   }, 90   news_title:{ 91     fontSize:20, 92     fontWeight:'bold', 93     color:'#CD1D1C', 94     marginLeft:10, 95     marginRight:15, 96   }, 97   news_item:{ 98     marginLeft:10, 99     marginRight:10,100     fontSize:16,101     lineHeight:40,102     borderBottomWidth:1,103     borderBottomColor:'#ddd',104     justifyContent:'center',105   },106 });107 108 AppRegistry.registerComponent('HelloWord', () => HelloWord);

呈现效果：

点击“今日要闻”下的新闻title弹出框效果：

修改numberOfLine属性：

numberOfLines={2}

修改为2后布局效果：