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

前端之家收集整理的这篇文章主要介绍了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,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,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,color: '#cd1d1c',marginTop: 15
    },news_item: {
    marginLeft: 10,fontSize: 15,lineHeight: 30
    },});

使用起来,也更“像”一个列表了:

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

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

AppRegistry.registerComponent('demo01',() => neteast);
原文链接:https://www.f2er.com/react/303887.html

猜你在找的React相关文章