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);