React Native学习之组件Text

Demo展示

今天通过仿网易新闻列表展示来学习Text组件，效果图如下：

RNText.gif

整个界面的布局的非常简单，分为上、中、下三栏。React Native提倡组件化，那么组件化的颗粒度为多少主要取决于应用的结构设计。所以我们可以通过三个独立的组件来共同完成这个界面的布局。

分步完成布局

封装头部组件

在根目录新建一个header.js文件，完成头部的布局

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

class HeaderComponent 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>
        );
    }
}


var styles = StyleSheet.create({

    flex: {
        marginTop: 25,
        height: 50,
        borderBottomWidth: 3 / PixelRatio.get(),
        borderBottomColor: '#EF2D36',
        alignItems: 'center'//使Text组件水平居中
    },
    font: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center'//使文字在Text组件中居中

    },
    font_1: {
        color: '#CD1D1C'
    },

    font_2: {
        color: '#FFF',
        backgroundColor: '#CD1D1C',
    },
});

//将此组件暴露出去，让其他js文件可以引用
module.exports = HeaderComponent;

这里的Text组件嵌套之后并不会按照flexbox布局那样默认为垂直方向排列。头部布局文件完成后就可以使用了，如何使用，很简单，直接在index.android.js文件里面引入就可以了。

//引入其他js文件
var HeaderComponent = require('./header');
...
return (
        <View style={styles.container}>
            <HeaderComponent/>
        </View>

header.png

封装新闻列表组件

在根目录新建一个news.title.js文件，完成新闻标题的布局

    import React, {Component} from 'react';
    import {
        StyleSheet,
        Text,
        View
    } from 'react-native';
    
    class NewsTitleComponent extends Component {
    
        render() {
            return (
                <View style={styles.newsItem}>
                    <Text style={styles.newsItemFont}>{this.props.title}</Text>
                </View>
            );
        }
    
    }
    var styles = StyleSheet.create({
    
        newsItem: {
            height: 40,
            marginLeft: 10,
            marginRight: 10,
            borderBottomWidth: 1,
            borderBottomColor: '#ddd',
            justifyContent: 'center'
        },
        newsItemFont: {
            fontSize: 16
        },
    
    });
    module.exports = NewsTitleComponent;

这里的新闻标题我们是做成列表，其实每一条新闻标题实际上可以独立成一个简单的组件，所以不应该把它写死在组件上。我们可以通过使用this.props属性来接收其他组件传过来的参数。那我们就可以在入口js文件这样写：

    var NewsTitleComponent = require('./news.title');
    ...
    
    return (
        <View style={styles.container}>
            <HeaderComponent/>
            <NewsTitleComponent title='宇航员在太空宣布"三体"获奖'/>
            <NewsTitleComponent title='女童遭鲨鱼袭击又下海救伙伴'/>
            <NewsTitleComponent title='男生连续做一周苦瓜吃吐女友'/>
        </View>
    );

newsTitle.png

封装“今日要闻”组件

先介绍Text组件的两个常用特性：

1、onPress：该属性的值是一个函数，支持按下事件（即手指触摸事件）。当手指按下的时候会执行该函数。

2､ numberOfLines：该属性的值是一个数字，用于规定最多显示多少行，如果超过该数值，则以省略号（...）表示。

好的。接下来在根目录继续新建一个news.detail.js文件

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

class NewsDetailComponent extends Component {

    show(title) {
        //这里是相当于Android当中的一个dialog
        alert(title);
    }

    render() {
        var news = [];
        //这里表示的是遍历其他组件传过来的数组。习惯了java的for循环，js中这个for循环看起来怪怪的
        for (var i in this.props.news) {
            var text = (
                <Text style={styles.news_item}
                      key={i}
                      numberOfLines={1}
                      onPress={this.show.bind(this, this.props.news[i])}
                >
                    {this.props.news[i]}
                </Text>

            );
            //将传过来的数组内容放到新的数组中
            news.push(text);
        }
        return (
            <View style={styles.flex}>
                <Text style={styles.news_title}>今日要闻</Text>
                {news}
            </View>
        );

    }
}

var styles = StyleSheet.create({

    flex: {
        flex: 1
    },
    news_title: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#cd1d1c',
        marginLeft: 10,
        marginTop: 15
    },
    news_item: {
        marginLeft: 10,
        marginRight: 10,
        fontSize: 18,
        lineHeight: 25,
        marginTop: 15
    }

});
module.exports = NewsDetailComponent;

上面代码中的key={i}是用来标记一个数组或者一个迭代器中元素的唯一标识，若没有加这句话，会出现以下Warning：

warning.png

接下来我们将这部分组件添加到主js文件中，最终整个index.android.js文件的代码如下：

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

//引入其他js文件
var HeaderComponent = require('./header');
var NewsTitleComponent = require('./news.title');
var NewsDetailComponent = require('./news.detail');

class RNText extends Component {
    render() {
        var news = [
            '刘慈欣《三体》获“雨果奖”为中国作家首次',
            '京津冀协同发展定位明确：北京无经济中心表述',
            '好奇宝宝第一次淋雨，父亲用镜头记录了下来',
            '京津冀协同发展定位明确：北京无经济中心表述+好奇宝宝第一次淋雨，父亲用镜头记录了下来'
        ];
        return (
            <View style={styles.container}>

                <HeaderComponent/>
                <NewsTitleComponent title='宇航员在太空宣布"三体"获奖'/>
                <NewsTitleComponent title='女童遭鲨鱼袭击又下海救伙伴'/>
                <NewsTitleComponent title='男生连续做一周苦瓜吃吐女友'/>
                <NewsTitleComponent title='NASA发短片纪念火星征程50年'/>
                <NewsDetailComponent news={news}/>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
});

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

我们的最终效果就出来了，如下图：

finalEffect.png

好了。我们的Text组件就学完了。若有不对之处，还忘告知。谢谢！

React Native学习之组件Text

Demo展示

分步完成布局

推荐阅读更多精彩内容