（二）React Native中View和Text组件的使用

前言

前段时间实在太忙，由于刚进公司，第一个项目要用混合开发，这种开发模式自己也没用过，期间遇见过与h5的各种奇葩问题，并且Android这端都是由自己负责，经过两个月的努力，公司项目终于上线。加之后面又回了一趟学校答辩，才把事情忙完了。这期间一直没时间好好学习RN，到现在才有时间学习。

这篇文章打算介绍下RN中的View和Text组件。

View

在RN中View类似html中的div组件，它支持多层嵌套，支持flexbox布局。

看下代码：

//index.android,js代码
import React from 'react';
import {
    AppRegistry,
} from 'react-native';

import myView from './demo/2.view'

AppRegistry.registerComponent('chen', () => myView);

//view.js代码

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

class MyView extends Component {
    render(){
        return(
            <View style={styles.container}>
                <View style={[styles.item, styles.center]}>
                    <Text style={styles.font}>酒店</Text>
                </View>
                <View style={[styles.item, styles.lineLeftRight]}>
                    <View style={[styles.center, styles.flex, styles.lineCenter]}>
                         <Text style={[styles.font]}>海外酒店</Text>
                    </View>
                    <View style={[styles.center, styles.flex]}>
                        <Text style={[styles.font]}>特惠酒店</Text>
                    </View>
                </View>
                <View style={[styles.item]}>
                    <View style={[styles.center, styles.flex, styles.lineCenter]}>
                        <Text style={[styles.font]}>团购</Text>
                    </View>
                    <View style={[styles.center, styles.flex]}>
                        <Text style={[styles.font]}>客栈，公寓</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1
    },
    container:{
        marginTop:200,
        marginLeft:5,
        marginRight:5,
        height:84,
        borderWidth:1,
        backgroundColor:'#FF0067',
        flexDirection:'row',
        borderRadius:5
    },
    item:{
        flex:1,
        height:80,
    },
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    lineLeftRight:{
        borderLeftWidth:1/PixelRatio.get(),
        borderRightWidth:1/PixelRatio.get(),
        borderColor:'#fff'
    },
    font:{
        color:'#fff',
        fontSize:16,
        fontWeight:'bold',
    },
    lineCenter:{
        borderColor:'#fff',
        borderBottomWidth:1/PixelRatio.get(),
    }
});

module.exports = MyView;

看下实现效果

简单分析下代码： index.android.js是android端的入口文件，该文件中加载了一个myView组件，AppRegistry.registerComponent(‘chen’, () => myView); 用来注册该组件，’chen’引号里面的字符串是项目名。而组件myView里面真正用来展示界面，这就是组件化实现思想，其中myView有几个Style属性应该被记录下：

flex： 是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第一个后面的参数为可选参数，默认值为：0 1 auto。这个属性和Android的weight属性类似。

justifyContent： 用来定义伸缩项目在水平轴的对齐方式

alignItems： 用来定义伸缩项目在交叉轴上的对齐方式，语法为：
alignItems:flex-start（默认值） | flex-end | center | stretch

PixelRatio.get()： 用来实现多手机的适配的。

Text

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

Text组件的特性：
1.onPress
2.numberOfLines 最多显示多少行
3.onLayout 监听方法 组价布局发生变化的时候调用

看下代码：

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

import Header from './3.header'

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

module.exports = MyText

效果图展示：

组件加载部分就不展示了，

从代码中我们可以看出，页面的展示都是以组件化的思想展示的，各自的模块都是独立的，这种思想是值得我们在任意的开发中值得学习的。