React Native学习之Text组件

Text组件主要用于显示文本：

• 具有响应性：可以相应点击等事件
• 可以嵌套：Text标签中可以嵌套Text标签
• 可以继承样式：内部Text组件可以继承外部Text组件的样式

Text组件的特性：

• onPress
• numberOfLines: 最多显示多少行
• onLayout

案例：网易新闻客户端 Text组件实现

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

头部组件

单独封装 独立成一个文件

ES5的语法：

//导出
module.exports=Header;`

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

源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    AppRegistry,
    Component,
    StyleSheet,
    PixelRatio,
    Text,
    View
    } from 'react-native';

class Header extends Component{
    render(){
        return (
            <View style={styles.flex}>
                <Text style={styles.font}>
                    <Text style={styles.font_1}>网易</Text>
                    <Text style={styles.font_2}>新闻</Text>
                    <Text>有态度"</Text>
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        marginTop:25,
        height:50,
        borderBottomWidth:3/PixelRatio.get(),
        borderBottomColor:'#EF2D36',
        alignItems:'center',
    },
    font:{
        fontSize:25,
        fontWeight:'bold',
        textAlign:'center',
    },
    font_1:{
        color:'#CD1D1C',
    },
    font_2:{
        color:'#FFF',
        backgroundColor:'#CD1D1C',
    },
});

module.exports=Header;

列表组件

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

//组件定义
class List extends Component{
    render(){
        return (
            <View style={styles.list_item}>
               <Text style={styles.list_item_font}>{this.props.title}</Text>
            </View>
        );
    }
}

重要新闻组件

//组件调用
<ImportantNews
    news={[
        '解放军报报社大楼正在拆除 标识已被卸下(图)',
        '韩国停签东三省52家旅行社 或为阻止朝旅游创汇',
        '南京大学生发起亲吻陌生人活动，有女生献初吻
        南京大学生发起亲吻陌生人活动，有女生献初吻
        南京大学生发起亲吻陌生人活动，有女生献初吻',
        '防总部署长江防汛:以防御98年量级大洪水为目标'
    ]}>
</ImportantNews>

//组件定义
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>

        );
    }
}

警告的处理：数组里面需要key属性，参考：https://fb.me/react-warning-keys

添加语句 key={i} 即可解决

主程序源码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    PixelRatio,
    Text,
    View
} from 'react-native';

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

class RNAPP 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({
    flex:{
        flex:1,
    },

    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,

    },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);