React-Native（五）：React Native之Text学习

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

代码：

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

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

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

 export default class HelloWord extends Component {
   render() {
     return (
       <View style={styles.body}>
         <Header></Header>
         <HotNews title='火箭军今起换发新军服 衬衣为国际经典色'></HotNews>
         <HotNews title='身份证现可异地办理 微信发红包需经认证'></HotNews>
         <HotNews title='传军队师职干部工资将达3万 国防部澄清'></HotNews>
         <HotNews title=''></HotNews>
         <ImportantNews news={['王儒林不再任山西省委书记:愉快服从组织安排',
         '土耳其警方逮捕22名机场袭击事件嫌疑人',
 '外媒:8名在中国丹东工作朝鲜女员工集体出逃',
 '"连云港电大女生被辱"续:施暴者曾遭校园暴力,该事件是一个社会问题引起了广大人民的关注',
 '北京检察院依法告知和公布雷洋尸检鉴定意见',
 '媒体:这5次大会上领导人曾讲了不少狠话',
 '埃航客机黑匣子获修复 客机可能曾起火燃烧']}></ImportantNews>
      </View>
     );
   }
 }

 class ImportantNews extends Component{
   show(title){
     alert(title)
   }
   render(){
     var news=[];
     for(var i in this.props.news){
       var text=(
         <Text
         key={i}
         onPress={this.show.bind(this,this.props.news[i])}
         numberOfLines={1}
         style={styles.news_item}>{this.props.news[i]}</Text>
       );
       news.push(text);
     }

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

 class HotNews extends Component{
   render(){
     return (
       <View style={styles.list_item}>
         <Text style={styles.list_item_font}>{this.props.title}</Text>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   body:{
     flex:1,
   },
   list_item:{
     height:40,
     marginLeft:10,
     marginRight:10,
     borderBottomWidth:1,
     borderBottomColor:'#ddd',
     justifyContent:'center',
   },
   list_item_font:{
     fontSize:16,
   },
   news_title:{
     fontSize:20,
     fontWeight:'bold',
     color:'#CD1D1C',
     marginLeft:10,
     marginRight:15,
   },
   news_item:{
     marginLeft:10,
     marginRight:10,
     fontSize:16,
     lineHeight:40,
     borderBottomWidth:1,
     borderBottomColor:'#ddd',
     justifyContent:'center',
   },
 });

 AppRegistry.registerComponent('HelloWord', () => HelloWord);

呈现效果：

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

修改numberOfLine属性：

numberOfLines={2}

修改为2后布局效果：