React Native学习笔记(2)--新闻列表实现

本篇是在学习《React Native入门与实战》这本书时做的笔记，代码基于React Native 0.44实现的，算是对该书中代码的小小更新。

Text组件是一个用来展示文本的组件。我们可以给它设置按下动作(onPress)，设置它的行数(numberOfLines)。

书中的新闻列表包括三部分，头部、列表项和要闻。效果如下图：



与上篇九宫格不同的是，我们将这三部分分别封装起来，即：Header，List，ImportantNews，这样，我们只需要在index.ios.js中引入这些组件即可，这样即达到了封装的效果，也可以重复使用这些自定义组件。

1.封装头部组件

头部组件包括四个部分，三种文字样式，另外还有一个红色的底线。我们创建新的文件header.js（与index.ios.js在同一个目录）。代码很简单：

//引入需要的组件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
PixelRatio
} from 'react-native'

//创建自定义组件header
export default class header extends Component {
render() {
return(
<View style={style.flex}>
<Text style={style.font}>
<Text style={style.font1}>网易</Text>
<Text style={style.font2}>新闻</Text>
<Text>有态度</Text>
</Text>
</View>
);
}
}

//创建样式表
style = StyleSheet.create({
flex: {
marginTop: 25,
height: 50,
borderBottomWidth: 3/ PixelRatio.get(),
borderBottomColor: '#EF2D36',
alignItems: 'center'
},
font: {
fontSize: 25,
fontWeight: 'bold',
textAlign: 'center'
},
font1: {
color: '#CD1D1C'
},
font2: {
color: '#fff',
backgroundColor: '#CD1D1c'
}
});

这个样式表中有三个font样式，font中的可以被内部继承，font1中添加颜色，其他的样式从font中继承，font2同理。flex中除了设置头部高度外，还添加了底部分隔线。

创建好自定义组件后，就是使用了，首先打开index.ios.js，引入header组件：

import Header from './header';

使用自定义组件：

class neteast extends Component {
render() {
return(
<Header></Header>
);
}
}

2.列表组件

这部分将自定义一个List组件，但实际上，它是列表的item。这样，我们每增加一个item，直接复用List组件即可。这里，我们将List组件单独放到list.js文件中。

//引入需要的组件
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

//创建自定义组件list
export default class list extends Component {
render() {
return (
<View style={styles.list_item}>
<Text style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
}

//创建样式表
styles = StyleSheet.create({
flex: {
flex: 1
},
list_item: {
height: 40,
marginLeft: 10,
marginRight: 10,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
justifyContent: 'center'
},
lsit_item_font: {
fontSize: 16
}
});

使用起来也比较简单：

<List title='宇航员在太空宣布“三体”获奖'></List>
<List title='明天端午节啦'></List>
<List title='再次学习React Native'></List>

3.完成“要闻”

其实“要闻”部分也是一个列表，这个组件相对来说，增加以下两个功能：1.超过两行，以省略号结尾；2.点击条目，弹出Dialog显示。

通过onPress添加点击事件，使用numberOfLines来设置最大行数，这里需要注意的是，在for循环使用了iterator，这就需要在循环内添加key属性，否则，模拟器会有黄色警告。

相比header和list来说，importantNews组件使用了循环，并且添加了新的函数show()，当用户点击条目时，会弹出对话框显示内容。

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

export default class importantNews extends Component {
show(title) {
alert(title);
}
render() {
var news = [];
for(var item of this.props.news) {
var text = (
<Text key={item} onPress={this.show.bind(this, item)}
numberOfLines={2}
style={styles3.news_item}>
{item}
</Text>
);
news.push(text);
}
return(
<View style={styles3.flex1}>
<Text style={styles3.news_title}>今日要闻</Text>
{news}
</View>
);
}
}

styles3 = StyleSheet.create({
flex1: {
flex: 1
},
news_title: {
fontSize: 20,
fontWeight: 'bold',
color: '#cd1d1c',
marginLeft: 10,
marginTop: 15
},
news_item: {
marginLeft: 10,
marginRight: 10,
fontSize: 15,
lineHeight: 30
},
});

使用起来，也更“像”一个列表了：

<ImportantNews news={[
'1、刘慈欣《三体》获“雨果奖”为中国作家首次',
'2、刘慈欣《三体》获“雨果奖”为中国作家首次',
'3、刘慈欣《三体》获“雨果奖”为中国作家首次',
'4、刘慈欣《三体》获“雨果奖”为中国作家首次 刘慈欣《三体》获“雨果奖”为中国作家首次 刘慈欣《三体》获“雨果奖”为中国作家首次'
]}>
</ImportantNews>

最后，别忘了将neteast注册，使用哦〜

AppRegistry.registerComponent('demo01', () => neteast);