13.React Native实战之Text组件

13、手把手教React Native实战之Text组件.wmv

Text组件主要用于显示文本；具有响应性，可以嵌套，可以继承式

内部Text组件可以继承外部Text组件的样式

Text组件的特性：

1. onPress
2. numberofLines最多显示多行
3. onLayout
4. 案例：网易新闻客户端Text组件实现

组件的颗粒度设计主要取决于应用的结构设计

1.头部组件   单独封装 独立成一个文件

module.exports=Header;

const Header=require('./header');

//import Header from'./header';

2.列表组件

<List title='一线城市楼市退烧 有房源一夜跌价160万'></List>

 

 

3.重要新闻  组件

<ImportantNews

                news={[

                '解放军报报社大楼正在拆除 标识已被卸下(图)',

                '韩国停签东三省52家旅行社 或为阻止朝旅游创汇',

                '南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻',

                '防总部署长江防汛:以防御98年量级大洪水为目标'

                ]}>

            </ImportantNews>

1.header.js类

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react';
import {AppRegistry,//Component,
  StyleSheet,PixelRatio,Text,View
} from 'react-native';class Header extends Component {render() {return (<View style={styles.flex}><Text style={styles.front}><Text style={styles.front_1}>网易</Text><Text style={styles.front_2}>新闻</Text><Text>有态度</Text></Text></View>
);}
}const styles = StyleSheet.create({flex:{marginTop:25,height:50,borderBottomWidth:3/PixelRatio.get(),borderBottomColor:'#EF2D36',alignItems:'center',// flex:1,
},
front:{fontSize:25,fontWeight:'bold',textAlign:'center',
},front_1:{color:'#CD1D1C',},
front_2:{
color:'#FFF',backgroundColor:'#CD1D1C',
}});module.exports=Header;

2.index.android.js

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react';
import {AppRegistry,//Component,
  StyleSheet,PixelRatio,Text,View
} from 'react-native';const Header=require('./header');
//import Header from'./header';
 class ZhangqfTest extends Component {render() {return (<View style={styles.flex}><Header></Header><List title='一线城市楼市退烧 有房源一夜跌价160万'></List><List title='上海市民称墓地太贵买不起 买房存骨灰'></List><List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List><List title='生活大爆炸人物原型都好牛逼'></List><ImportantNewsnews={['解放军报报社大楼正在拆除 标识已被卸下(图)','韩国停签东三省52家旅行社 或为阻止朝旅游创汇','南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻','防总部署长江防汛:以防御98年量级大洪水为目标']}></ImportantNews></View>
    );}
}class List extends Component{render(){return(<View style={styles.list_item}><Text style={styles.list_item_font}>{this.props.title}</Text></View>
      );}}class ImportantNews extends Component{show(title){alert(title);}render(){var news=[];for(var i in this.props.news){var text=(<TextonPress={this.show.bind(this,this.props.news[i])}numberOfLines={2}style={styles.news_item}key={i}>{this.props.news[i]}</Text>
            );news.push(text);}return (<View style={styles.flex}><Text style={styles.news_title}>今日要闻</Text>
                {news}</View>
);}
}const styles = StyleSheet.create({list_item:{height:40,marginLeft:10,marginRight:10,borderBottomWidth:1,borderBottomColor:'#ddd',justifyContent:'center',},list_item_font:{fontSize:16,
},news_item:{marginLeft:10,marginRight:10,fontSize:15,lineHeight:40,
},
news_title:{fontSize:20,fontWeight:'bold',color:'#CD1D1C',marginLeft:10,marginTop:15,
},flex:{flex:1,
},});AppRegistry.registerComponent('ZhangqfTest', () => ZhangqfTest);