---------------------------------------------------------------------------------------------------React.native is an open source JavaScript-based open-source framework for Facebook,apps that are handy for developing mobile devices. Moreover, it is convenient to update the UI and data of the app, and it is easy to deploy. Goodmao hope to help you get started quickly! ----------------------------------------------------------------------------------------------------
Reference:Style Style:http://facebook.github.io/react-native/docs/view.html#style View view:http://facebook.github.io/ React-native/docs/style.html#content
Color reference:http://www.w3school.com.cn/html/html_colors.asp Source Code Reference:layout.h/.c File----------------------------------------------------------------------------------------------------
We continue this section to describe the layout and style of the UI. This section describes the styles for the next multiple views view.
First, use the following example to introduce:
1. Set the mode ' use strict '; 2. import library var React = require (' react-native '); 3. Define variable Add dependency var { appregistry, StyleSheet, View,} = REACT;//4. Create a component class var helloreact = React.createclass ({ //Component Rendering method //Set View render:function () { return ( <view style = {{backgroundcolor: ' Gray ', width:300, height:300,}}> <view style = {{backgroundcolor: ' Yellow ', width:50, height:50}}/> </ View> ); }); /5. Register appregistry.registercomponent (' Helloreact ', () = Helloreact);
Ii. Common Properties for multiple views view
(1) Edge distance "difference"margin: Is the distance from the view border to other views (not child views).padding: Is the content of this view (child view), the distance from the border of this view. 1.Edge distance from other views (not child views)Property:margin, margintop, MarginBottom, MarginLeft, MarginRightType: Floating-point number, which can be negative. Note: If no other views are around, the distance from the boundary line relative to the parent viewmargin: Relative left and top view, left and top distancemargintop: Relative upper view, top distanceMarginBottom: Relative lower view, bottom distancemarginleft: Relative to left view, distance to leftmarginright: Relative right view, right distancemarginvertical: The samemargintopMarginhorizontal: The samemarginleft2.set the edge distance of a child view from this viewProperty:padding,paddingtop,Paddingbottom,paddingleft,paddingright,paddingvertical,PaddinghorizontalType: Floating-point number, which can be negative. function: Same as 1, except that all PADDINGX attribute values are for the child view of the current view.
【Example": A. Layout
var helloreact = React.createclass ({//Create component Class //Component Rendering method //Settings View ' render:function () { return ( <view style = {backgroundcolor: ' Gray ', width:300, height:300, marginhorizontal:50, paddingleft:20, paddingtop:50, flexdirection: ' Row ', }}> <view style = {{backgroundcolor: ' Blue ', width:50 , height:50}}/> </View> );} );
B.
(2) arrangement of child views 1. The arrangement direction property of a child view:flexdirectionType: String value: 'Row' arranged by rows; 'column' Arranged by column, by default, by column. For example: flexdirection: ' Row ',
2. Alignment of child views-vertical orientation properties:justifycontentVertical direction Type: String, Value: 'Center', the sub-view is arranged vertically; 'Flex-end', the child view is aligned from the end position (by row, from the right, and from the bottom when the column is pressed); 'Space-around', the sub-view is evenly distributed. ‘Space-between', the sub-view is evenly distributed.The two ends retain half the size of the space between the child view and the child view. For example: justifycontent: 'Center',//Vertical centering reference: http://caibaojian.com/flexbox-guide.html http://caibaojian.com/de Mo/flexbox/justify-content.html
【Example": A. Style above example, parameter: justifycontent: 'Flex-end‘
<view style = {backgroundcolor: ' Gray ', width:300, height:300, top:20, flexdirection: ' Row ',//by line justifycontent: ' Flex-end ',//Sub-view aligned from end position (by row, from right, and from bottom when column is pressed)} } > <view style = {backgroundcolor: ' Blue ', width:50, height:50}}/> <view style = {{ BackgroundColor: ' Yellow ', width:50, height:50}}/> <view style = {{backgroundcolor: ' green ', width:50, H Eight:50}}/></view>
B. Effects
The example": A. Style above example, parameter: justifycontent: 'Space-between',///average distribution B. Effect
"Example": A. Style The above example, parameter: justifycontent: 'Space-around',//Average distribution B. Effects
3. Alignment of child views-horizontal orientation properties:2-AlignitemsHorizontal direction Type: String, Value: 'Center', the sub-view is arranged in the center; 'Flex-end', the child view is aligned from the end position (by row, from the right, and from the bottom when the column is pressed); 'Stretch', the child view is stretched for example: Alignitems: ' Center ',//Horizontal Center
"Example": A. Style above example, parameter: flexdirection: 'column',//By column Alignitems: 'Center',//Sub-view centered; B. Effect
A. Style above example, parameter: flexdirection: 'column',//By column Alignitems: 'Flex-end',//child views are aligned from the end position (when rows are aligned from the right, and when columns are aligned from the bottom); B. Effects
A. Style
<view style = {backgroundcolor: ' Gray ', width:300, height:300, top:20, flexdirection: ' column ', Alignitems by column : ' Stretch ',//child view is stretched }}> <view style = {{backgroundcolor: ' Blue ', height:50}}/ > <view style = {backgroundcolor: ' Yellow ', width:50, height:50}}/> <view style = {{Backgroundcol Or: ' Green ', width:50, height:50}}/> </View>
B. Effect note: The corresponding sub-view, without setting width widths, is stretched.
Note: The corresponding sub-view is not stretched if width:50 is set.
Note: If the direction is modified to arrange row by row, the height of the child view is not set, and the height is stretched a. Style
<view style = {backgroundcolor: ' Gray ', width:300, height:300, top:20, flexdirection: ' Row ',//By column alignitems: ' Stretch ', //Child view is stretched }}> <view style = {{backgroundcolor: ' Blue ', width:50, }} /> <view style = {{backgroundcolor: ' Yellow ', width:50, height:50}}/> <view style = {{BACKGROUNDC Olor: ' Green ', width:50, height:50}}/> </View>
B. Effects
---------------------------------------------Supplemental Note: The style attributes in react are different from those in CSS and can be viewed in the official documentation You can also directly see the Source: File location: React.xcodeproj project,react->layout->layout.c
Note: All properties of view views can be found in the source code analysis or Reference document description: React-doc-view
<View> in the RCTView.h source, you can see: Rctview inherited UIView
Valid keys: [
"Width",
"Height",
"Top",
"Left",
"Right,"
"Bottom",
"Margin",
"Marginvertical",
"Marginhorizontal",
"MarginTop",
"MarginBottom",
"MarginLeft",
"MarginRight",
"Padding",
"Paddingvertical",
"Paddinghorizontal",
"Paddingtop",
"Paddingbottom",
"Paddingleft",
"Paddingright",
"BorderWidth",
"borderTopWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"Position",
"Flexdirection",
"Flexwrap",
"Justifycontent",
"Alignitems",
"Alignself",
"Flex",
"Transform",
"Transformmatrix",
"Rotation",
"ScaleX",
"ScaleY",
"TranslateX",
"Translatey",
"BackgroundColor",
"BorderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"Borderradius",
"Bordertopleftradius",
"Bordertoprightradius",
"Borderbottomleftradius",
"Borderbottomrightradius",
"Opacity",
"Overflow",
"Shadowcolor",
"Shadowoffset",
"Shadowopacity",
"Shadowradius"]
"Facebook UI development Framework react introduction to the seven" multi-view layout and styling style (iOS platform)-goodmao
