本篇是在学习《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