這一節(jié)學(xué)習(xí)Text組件雳刺，話不多說(shuō)擎椰，用實(shí)際小模塊來(lái)實(shí)踐一下寥闪。如下圖所示：
屏幕快照 2016-04-29 下午1.12.29.png
偷個(gè)懶~~~(>_<)~~~
屏幕快照 2016-04-26 下午7.22.53.png
1.封裝頭部組件 ：先新建一個(gè)文件 header.js
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
PixelRatio
} = React;
/*
首先對(duì)于有三個(gè)Text,分別表示“網(wǎng)易”水孩、“新聞”蓝角、“有態(tài)度”
這里我們?cè)谕鈱忧短琢艘粋€(gè)Text，這樣Text就不會(huì)按照f(shuō)lexbox布局 哭懈，這樣我們給了一個(gè)全局的樣式font灾馒。
然后再分別對(duì)'新聞'、'有態(tài)度'分別設(shè)置fontOne遣总、fontTwo
*/
var Header = React.createClass({
render: function(){
return (
<View style={styles.flex}>
<Text style={styles.font}>
<Text style={styles.fontOne}>網(wǎng)易</Text>
<Text style={styles.fontTwo}>新聞</Text>
<Text>有態(tài)度°</Text>
</Text>
</View>
);
}
});
/*
flex
alignItems:'center' 使Text組件水平居中
其他參數(shù)不用解釋
font
textAlign:'center' 使文字在Text組件中居中
*/
var styles = StyleSheet.create ({
flex: {
marginTop:25,
height:50,
borderBottomWidth:3/PixelRatio.get(),
borderColor:'#EF2D36',
alignItems:'center'
},
font: {
fontSize:25,
fontWeight:'bold',
textAlign:'center'
},
fontOne: {
color:'#CD1D1C'
},
fontTwo: {
color:'#fff',
backgroundColor:'#CD1D1C'
}
});
/*
exports 成獨(dú)立組件
*/
module.exports = Header;
然后我們可以測(cè)試一下封裝后的效果睬罗，在index.ios.js文件中寫(xiě)如下代碼：
var React = require('react-native');
var Header = require('./header'); //加載Header組件
var {
AppRegistry,
StyleSheet,
View,
Text
} = React;
var app = React.createClass ({
render: function(){
return (
<View style={styles.flex}>
<Header></Header>
</View>
);
}
});
var styles = StyleSheet.create ({
flex: {
flex:1
},
});
AppRegistry.registerComponent('InformationServicesRN' , () => app);
實(shí)現(xiàn)效果如下：
屏幕快照 2016-04-26 下午9.48.04.png
2.列表組件
列表看起來(lái)和iOS的tableview差不多轨功，React Native有封裝好的，也可以直接調(diào)用原生的容达，這里為了練習(xí)Text我們就自己做簡(jiǎn)單的封裝古涧。每一條新聞可以獨(dú)立成一個(gè)簡(jiǎn)單的組件，同時(shí)還希望提供一個(gè)title花盐，而不是寫(xiě)死在組件中（有點(diǎn)自定義cell蒿褂，再提供一個(gè)外部title 的意思）。這里直接在index.ios.js里面寫(xiě)
/*
封裝List組件（類似于函數(shù)）
*/
var List = React.createClass ({
render: function(){
return (
<View style={styles.listItem}>
<Text style={styles.listItemFont}>{this.props.title}</Text>
</View>
);
}
});
然后在程序入口app中使用剛才封裝好的List組件
var app = React.createClass ({
render: function(){
return (
<View style={styles.flex}>
<Header></Header>
<List title='宇航員在太空宣布"三體"獲獎(jiǎng)'></List>
<List title='NASA發(fā)短片紀(jì)念火星征程50年'></List>
<List title='男生連續(xù)做一周苦瓜吃吐女友'></List>
<List title='女童遭鯊魚(yú)襲擊又下海救伙伴'></List>
</View>
);
}
});
樣式為：
var styles = StyleSheet.create ({
flex: {
flex:1
},
listItem: {
height:40,
marginLeft:10,
marginRight:10,
borderBottomWidth:1,
borderBottomColor:'#ddd',
justifyContent:'center'
},
listItemFont: {
fontSize:16
}
});
展示效果如下：
屏幕快照 2016-04-29 下午12.40.09.png
3.完成“今日要聞”
要完成三個(gè)功能：標(biāo)題展示卒暂、當(dāng)標(biāo)題超過(guò)兩行時(shí)，用（...）表示娄帖、點(diǎn)擊標(biāo)題彈出標(biāo)題內(nèi)容也祠。和List一樣，我們也做一個(gè)封裝以便調(diào)用：
/*
封裝ImportantNews組件
用this.props屬性接收外部傳入的參數(shù)
增加onPress事件近速，當(dāng)新聞被按下時(shí)通過(guò)bind調(diào)用show方法诈嘿，彈出標(biāo)題
bind方法中： this表示上下文對(duì)象，類似于OC中的self
this.props.news[i] 傳遞參數(shù)
numberOfLines = {2} 表示顯示2行削葱，和OC中的差不多
{this.props.news[i]} 獲取傳遞數(shù)據(jù)
*/
var ImportantNews = React.createClass ({
show: function(title) {
alert(title);
},
render: function() {
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.newsItem}>
{this.props.news[i]}
</Text>
);
news.push(text);
}
return (
<View style={styles.flex}>
<Text style={styles.newsTitle}>今日要聞</Text>
{news}
</View>
);
}
});
然后在app中調(diào)用
<ImportantNews news = {[
'1奖亚、劉慈欣《三體》獲雨果獎(jiǎng)，為中國(guó)作家首次析砸，為中國(guó)作家首次',
'2昔字、京津冀協(xié)同發(fā)展定位明確：北京無(wú)經(jīng)濟(jì)中心表述',
'3、好奇寶寶第一次淋雨首繁，好奇寶寶第一次淋雨好奇寶寶第一次淋雨好奇寶寶第一次淋雨好奇寶寶第一次淋雨好奇寶寶第一次淋雨好奇寶寶第一次淋雨好奇寶寶第一次淋雨',
'4作郭、人名郵電出版社即將出版《React Native入門與實(shí)戰(zhàn)》，讀者可以用JavaScript開(kāi)發(fā)應(yīng)用']}>
</ImportantNews>
樣式為：
newsTitle: {
fontSize:20,
fontWeight:'bold',
color:'#CD1D1C',
marginLeft:10,
marginTop:15
},
newsItem: {
marginLeft:10,
marginRight:10,
fontSize:15,
lineHeight:20
}
看看效果吧~
