接上一篇，我們來練習一下元件的封裝和元件的傳值

九宮格例子：

老樣子，我們又圖，沒圖說個xx
預期效果：

先來看看沒有封裝元件前的程式碼

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  PixelRatio,
} = React;
var stylesForXC = StyleSheet.create({
    container : {
        height: 84,
        borderWidth:1
 
,
        borderColor: 'red',
        flexDirection: 'row',
        marginTop: 25,
        marginLeft: 5,
        marginRight: 5,
        borderRadius: 5,    /*圓角半徑*/
        padding: 2,
        backgroundColor: '#ff0997',
    },

    item: {
        flex: 1,
        height: 80,
    },

    flex: {
        flex: 1
 
,
    },

    center: {
        justifyContent: 'center',/*垂直水平居中，其實是按照flexDriection的方向居中*/
        alignItems : 'center',  /*水平居中*/
    },

    font : {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },

    lineLeft: {
        borderLeftWidth: 1/PixelRatio.get(),
        borderColor: '#fff'
 
,
    },

    lineCenter: {
        borderBottomWidth:1/PixelRatio.get(),
        borderColor: '#fff',
    }
})

var wxsPrj = React.createClass({
  render: function() {
    return (
    <View style = {stylesForXC.flex}>
        <View style = {[stylesForXC.container]}>
            <View style = {[stylesForXC.item,stylesForXC.center]}>
                <Text style= {stylesForXC.font}>我想回家</Text>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>黃燜雞</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>印表機</Text>
                </View>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>美女</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>年貨來了</Text>
                </View>
            </View>
        </View>
        </View>
        );
    }
})

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

我們發現，在主介面函式中的介面佈局很多，這樣不利於我們模組化的思想我們搞出些事情，把裡邊介面的佈局程式碼封裝成一個元件NineBox

程式碼變動：

var NineBox = React.createClass({
    render:function(){
        return(
        <View style = {stylesForXC.flex}>
        <View style = {[stylesForXC.container]}>
            <View style = {[stylesForXC.item,stylesForXC.center]}>
                <Text style= {stylesForXC.font}>我想回家</Text>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>黃燜雞</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>印表機</Text>
                </View>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>美女</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>年貨來了</Text>
                </View>
            </View>
        </View>
        </View>
        );
    }
}) 


var wxsPrj = React.createClass({
  render: function() {
    return (
            <NineBox></NineBox>
        );
    }
})

不難發現，我們重新建立一個元件，把佈局放進去，然後在主介面函式中呼叫一下就ok，顯得簡潔明瞭
這裡有個需要大家注意的地方，這種元件定義的時候，元件名稱開頭一定要大寫英文字母

好了，問題又來了，我們現在想把效果途中的“美女”改成“帥哥”那麼，就目前的程式碼來說，我們只能找到“美女”替換了，但是，我們是元件開發啊同志們，怎麼能這樣low，這個時候我們就需要來定義元件引數了，把它寫活，到時候傳一個變數即可，廢話不多說。

var NineBox = React.createClass({
    render:function(){
        return(
        <View style = {stylesForXC.flex}>
        <View style = {[stylesForXC.container]}>
            <View style = {[stylesForXC.item,stylesForXC.center]}>
                <Text style= {stylesForXC.font}>{this.props.one}</Text>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>{this.props.second1}</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>{this.props.second2}</Text>
                </View>
            </View>

            <View style = {[stylesForXC.item,stylesForXC.lineLeft]}>
                <View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}>
                    <Text style= {stylesForXC.font}>{this.props.third1}</Text>
                </View>
                <View style = {[stylesForXC.center,stylesForXC.flex]}>
                    <Text style= {stylesForXC.font}>{this.props.third2}</Text>
                </View>
            </View>
        </View>
        </View>
        );
    }
}) 


var wxsPrj = React.createClass({
  render: function() {
    return (

            <NineBox one = "我到家了" second1 = "四件套"  second2 = "八杯茶" third1 = "帥哥" third2 = "舒服的大床"></NineBox>

        );
    }
})

看看效果：

<NineBox one = "我到家了" second1 = "四件套" second2 = "八杯茶" third1 = "帥哥" third2 = "舒服的大床"></NineBox> 中的one， second1，second2，third1，third2，就是在NineBox元件定義的時候使用的{this.props.second1}等

• 程式碼中引入了PixelRatio API ,它的get方法獲取裝置的畫素比，1/PixelRatio.get() 就可以獲取最小線寬。
• container 使用了 margin屬性，marginTop：25，使得內容距離狀態25pt， marginLeft , marginRight 以此類推。