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>

             <ImportantNews
                news={[
                '解放军报报社大楼正在拆除 标识已被卸下(图)',
                '韩国停签东三省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=(
                <Text
                    onPress={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);