剛接觸React-Native的時候也是看官方文件，官方文件就是講的基礎的元件與與基礎的API,然後就開始寫一些簡單的介面，但是發現自己寫的簡單介面程式碼非常的長，修改起來也是非常的麻煩，維護起來非常的費盡。那麼今天就簡單的介紹一下元件的封裝和傳值吧。你會發現節省了好多的程式碼。

       效果圖:(如下所示)

一、先說說沒有封裝之前的程式碼是什麼樣子的吧。

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

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',
    }
})

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

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',
    }
})


AppRegistry.registerComponent('wxsPrj', () => wxsPrj);
var betree2 = 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('betree2', () => betree2);

     我們發現在主函式上介面佈局很多，這樣不利於模組化的思想，我們其實可以把裡面的介面的佈局封裝成一個名為Box的元件，然後在主函式中對元件進行引用，這樣看起來就好多了。

二、封裝元件後的程式碼如下:

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 betree2 = React.createClass({
render: function() {
return (
<Box></Box>
        );
    }
})

   這樣看起來把佈局放進去，在主函式中呼叫就可以了，這樣是不是就清晰很多了。有一點我們是需要注意的就是:這種定義的元件首字母一定要大寫，不然會報錯(如下圖所示，意思就是說每個首字母的名字要大寫，剛開始我也沒注意這個細節)。

三、那麼問題又來了，如果我想修改<Text>元件裡面的內容(比如:'全球購'改為'電腦館'),有人會說那好辦自己找下里面的程式碼把''全球購'改為'電腦館'不就可以了，那如果我成百個Text呢? 我們其實可以定義一個元件引數，這樣就方便多了。程式碼如下:

var Box = 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 betree2 = React.createClass({
render: function() {
return (

<Box one = "飯館" second1 = "服裝城"  second2 = "美食街" third1 = "電腦城" third2 = "全球購"></Box>

        );
    }
})
效果圖如下所示: