本章节主要学习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后布局效果：