react-native組件封裝與傳值

來源:互聯網
上載者:User

標籤:

轉載連結: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組件封裝與傳值

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.