React-native component encapsulation and transfer value

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

Just contact React-native also look at the official documents, the official document is the basic components and the basic API, then began to write some simple interface, but found that their own simple interface code is very long, the changes are very cumbersome, maintenance is very laborious. So today, simply introduce the package and the value of the component. You'll find that you've saved a lot of code.

:(as shown below)

First, tell me what the code looks like without a package.

' 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,/* Fillet radius */
Padding:2,
BackgroundColor: ' #949494 '
},

Item: {
Flex:1,
Height:80
},

Flex: {
Flex:1
},

Center: {
Justifycontent: ' Center ',/* Vertical horizontal center, in fact, in accordance with the direction of Flexdriection * *
Alignitems: ' Center ',/* Horizontal 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,/* Fillet radius */
Padding:2,
BackgroundColor: ' #949494 ',
},

Item: {
Flex:1,
HEIGHT:80,
},

Flex: {
Flex:1,
},

Center: {
Justifycontent: ' Center ',/* Vertical horizontal center, in fact, in accordance with the direction of Flexdriection * *
Alignitems: ' Center ',/* Horizontal 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}> Restaurant </Text>
</View>

<view style = {[stylesforxc.item,stylesforxc.lineleft]}>
<view style = {[stylesforxc.center,stylesforxc.flex,stylesforxc.linecenter]}>
<text style= {stylesforxc.font}> Clothing City </Text>
</View>
<view style = {[stylesforxc.center,stylesforxc.flex]}>
<text style= {stylesforxc.font}> Food Street </Text>
</View>
</View>

<view style = {[stylesforxc.item,stylesforxc.lineleft]}>
<view style = {[stylesforxc.center,stylesforxc.flex,stylesforxc.linecenter]}>
<text style= {stylesforxc.font}> Computer City </Text>
</View>
<view style = {[stylesforxc.center,stylesforxc.flex]}>
<text style= {stylesforxc.font}> Global purchase </Text>
</View>
</View>
</View>
</View>
);
}
})

Appregistry.registercomponent (' Betree2 ', () = Betree2);

We found a lot of interface layout in the main function, this is not conducive to the idea of modularity, we can actually put the interface inside the layout of a component called box, and then in the main function of the component reference, it looks much better.

Second, the code after encapsulating the component is as follows:

Render:function () {
Return
<view style = {stylesforxc.flex}>
<view style = {[stylesforxc.container]}>
<view style = {[stylesforxc.item,stylesforxc.center]}>
<text style= {stylesforxc.font}> Restaurant </Text>
</View>

<view style = {[stylesforxc.item,stylesforxc.lineleft]}>
<view style = {[stylesforxc.center,stylesforxc.flex,stylesforxc.linecenter]}>
<text style= {stylesforxc.font}> Clothing City </Text>
</View>
<view style = {[stylesforxc.center,stylesforxc.flex]}>
<text style= {stylesforxc.font}> Food Street </Text>
</View>
</View>

<view style = {[stylesforxc.item,stylesforxc.lineleft]}>
<view style = {[stylesforxc.center,stylesforxc.flex,stylesforxc.linecenter]}>
<text style= {stylesforxc.font}> Computer City </Text>
</View>
<view style = {[stylesforxc.center,stylesforxc.flex]}>
<text style= {stylesforxc.font}> Global purchase </Text>
</View>
</View>
</View>
</View>
);
}
})


var betree2 = React.createclass ({
Render:function () {
Return (
<Box></Box>
);
}
})
 

This looks like putting the layout in, calling it in the main function, so it's a lot clearer. One thing we need to be aware of is that the first letter of this defined component must be capitalized, otherwise it will be an error (as shown, meaning that each initial letter is capitalized, and I did not pay attention to this detail at first).

Three, then the question again, if I want to modify the contents of the <Text> components (such as: ' Global buy ' changed to ' Computer Museum '), some people will say that good to find the code inside the "Global buy" to the "computer Museum" is not OK, if I become hundreds of Text it? We can actually define a component parameter, so it's much easier. The code is as follows:

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 = "Restaurant" Second1 = "Clothing City" Second2 = "Food Street" third1 = "Computer City" THIRD2 = "Global buy" ></Box>

);
}
})
As shown below:

React-native component encapsulation and transfer value