Demo展示
今天通过仿网易新闻列表展示来学习Text组件，效果图如下：
RNText.gif
整个界面的布局的非常简单，分为上、中、下三栏。React Native提倡组件化，那么组件化的颗粒度为多少主要取决于应用的结构设计。所以我们可以通过三个独立的组件来共同完成这个界面的布局。
分步完成布局
- 封装头部组件
在根目录新建一个header.js文件，完成头部的布局
import React, {Component} from 'react';
import {
StyleSheet,
Text,
PixelRatio,
View
} from 'react-native';
class HeaderComponent extends Component {
render() {
return (
<View style={styles.flex}>
<Text style={styles.font}>
<Text style={styles.font_1}>网易</Text>
<Text style={styles.font_2}>新闻</Text>
<Text>有态度</Text>
</Text>
</View>
);
}
}
var styles = StyleSheet.create({
flex: {
marginTop: 25,
height: 50,
borderBottomWidth: 3 / PixelRatio.get(),
borderBottomColor: '#EF2D36',
alignItems: 'center'//使Text组件水平居中
},
font: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center'//使文字在Text组件中居中
},
font_1: {
color: '#CD1D1C'
},
font_2: {
color: '#FFF',
backgroundColor: '#CD1D1C',
},
});
//将此组件暴露出去，让其他js文件可以引用
module.exports = HeaderComponent;
这里的Text组件嵌套之后并不会按照flexbox布局那样默认为垂直方向排列。头部布局文件完成后就可以使用了，如何使用，很简单，直接在index.android.js文件里面引入就可以了。
//引入其他js文件
var HeaderComponent = require('./header');
...
return (
<View style={styles.container}>
<HeaderComponent/>
</View>
header.png
- 封装新闻列表组件
在根目录新建一个news.title.js文件，完成新闻标题的布局
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class NewsTitleComponent extends Component {
render() {
return (
<View style={styles.newsItem}>
<Text style={styles.newsItemFont}>{this.props.title}</Text>
</View>
);
}
}
var styles = StyleSheet.create({
newsItem: {
height: 40,
marginLeft: 10,
marginRight: 10,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
justifyContent: 'center'
},
newsItemFont: {
fontSize: 16
},
});
module.exports = NewsTitleComponent;
这里的新闻标题我们是做成列表，其实每一条新闻标题实际上可以独立成一个简单的组件，所以不应该把它写死在组件上。我们可以通过使用this.props属性来接收其他组件传过来的参数。那我们就可以在入口js文件这样写：
var NewsTitleComponent = require('./news.title');
...
return (
<View style={styles.container}>
<HeaderComponent/>
<NewsTitleComponent title='宇航员在太空宣布"三体"获奖'/>
<NewsTitleComponent title='女童遭鲨鱼袭击又下海救伙伴'/>
<NewsTitleComponent title='男生连续做一周苦瓜吃吐女友'/>
</View>
);
newsTitle.png
- 封装“今日要闻”组件
先介绍Text组件的两个常用特性：
1、onPress：该属性的值是一个函数，支持按下事件（即手指触摸事件）。当手指按下的时候会执行该函数。
2､ numberOfLines：该属性的值是一个数字，用于规定最多显示多少行，如果超过该数值，则以省略号（...）表示。
好的。接下来在根目录继续新建一个news.detail.js文件
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
class NewsDetailComponent extends Component {
show(title) {
//这里是相当于Android当中的一个dialog
alert(title);
}
render() {
var news = [];
//这里表示的是遍历其他组件传过来的数组。习惯了java的for循环，js中这个for循环看起来怪怪的
for (var i in this.props.news) {
var text = (
<Text style={styles.news_item}
key={i}
numberOfLines={1}
onPress={this.show.bind(this, this.props.news[i])}
>
{this.props.news[i]}
</Text>
);
//将传过来的数组内容放到新的数组中
news.push(text);
}
return (
<View style={styles.flex}>
<Text style={styles.news_title}>今日要闻</Text>
{news}
</View>
);
}
}
var styles = StyleSheet.create({
flex: {
flex: 1
},
news_title: {
fontSize: 20,
fontWeight: 'bold',
color: '#cd1d1c',
marginLeft: 10,
marginTop: 15
},
news_item: {
marginLeft: 10,
marginRight: 10,
fontSize: 18,
lineHeight: 25,
marginTop: 15
}
});
module.exports = NewsDetailComponent;
上面代码中的key={i}是用来标记一个数组或者一个迭代器中元素的唯一标识，若没有加这句话，会出现以下Warning：
warning.png
接下来我们将这部分组件添加到主js文件中，最终整个index.android.js文件的代码如下：
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
//引入其他js文件
var HeaderComponent = require('./header');
var NewsTitleComponent = require('./news.title');
var NewsDetailComponent = require('./news.detail');
class RNText extends Component {
render() {
var news = [
'刘慈欣《三体》获“雨果奖”为中国作家首次',
'京津冀协同发展定位明确：北京无经济中心表述',
'好奇宝宝第一次淋雨，父亲用镜头记录了下来',
'京津冀协同发展定位明确：北京无经济中心表述+好奇宝宝第一次淋雨，父亲用镜头记录了下来'
];
return (
<View style={styles.container}>
<HeaderComponent/>
<NewsTitleComponent title='宇航员在太空宣布"三体"获奖'/>
<NewsTitleComponent title='女童遭鲨鱼袭击又下海救伙伴'/>
<NewsTitleComponent title='男生连续做一周苦瓜吃吐女友'/>
<NewsTitleComponent title='NASA发短片纪念火星征程50年'/>
<NewsDetailComponent news={news}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
AppRegistry.registerComponent('RNText', () => RNText);
我们的最终效果就出来了，如下图：
finalEffect.png
好了。我们的Text组件就学完了。若有不对之处，还忘告知。谢谢！
网友评论