react-native組件封裝與傳值

時間 2019-11-20

原文原文鏈接

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

剛接觸React-Native的時候也是看官方文檔，官方文檔就是講的基礎的組件與與基礎的API,而後就開始寫一些簡單的界面，可是發現本身寫的簡單界面代碼很是的長，修改起來也是很是的麻煩，維護起來很是的費盡。那麼今天就簡單的介紹一下組件的封裝和傳值吧。你會發現節省了好多的代碼。react-native

效果圖:(以下所示)模塊化

1、先說說沒有封裝以前的代碼是什麼樣子的吧。函數

'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的組件，而後在主函數中對組件進行引用，這樣看起來就好多了。佈局

2、封裝組件後的代碼以下:flex

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>
        );
    }
})

這樣看起來把佈局放進去，在主函數中調用就能夠了，這樣是否是就清晰不少了。有一點咱們是須要注意的就是:這種定義的組件首字母必定要大寫，否則會報錯(以下圖所示，意思就是說每一個首字母的名字要大寫，剛開始我也沒注意這個細節)。ui

3、那麼問題又來了，若是我想修改<Text>組件裏面的內容(好比:'全球購'改成'電腦館'),有人會說那好辦本身找下里面的代碼把''全球購'改成'電腦館'不就能夠了，那若是我成百個Text呢? 咱們其實能夠定義一個組件參數，這樣就方便多了。代碼以下:this

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>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。