react-native組件封裝與傳值

標籤：

轉載連結:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-component-packaging-and-traditional-values/

 

剛接觸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>

        );
    }
})
如下所示:

 

react-native組件封裝與傳值