前言

前段時間實在太忙，由於剛進公司，第一個專案要用混合開發，這種開發模式自己也沒用過，期間遇見過與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

效果圖展示：

元件載入部分就不展示了，

從程式碼中我們可以看出，頁面的展示都是以元件化的思想展示的，各自的模組都是獨立的，這種思想是值得我們在任意的開發中值得學習的。