Available style attributes in the Andriod React Native style sheet

Available style attributes in the Andriod React Native style sheet

After writing so many blog posts about Android React Native, we basically finished all the complicated things. Next, let's take a look at some simple things that are related to layout, that is, css styles, which css styles can be set for a View? Is the css style exactly the same as that in the web? Is it still different? In fact, as long as you write a style that does not exist in the style sheet, a lot of errors will be reported, prompting you that the style does not exist, and then providing you with all the available styles,

The following styles are all available attributes in the style sheet.

"alignItems","alignSelf","backfaceVisibility","backgroundColor","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomWidth","borderColor","borderLeftColor","borderLeftWidth","borderRadius","borderRightColor","borderRightWidth","borderStyle","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderWidth","bottom","color","flex","flexDirection","flexWrap","fontFamily","fontSize","fontStyle","fontWeight","height","justifyContent","left","letterSpacing","lineHeight","margin","marginBottom","marginHorizontal","marginLeft","marginRight","marginTop","marginVertical","opacity","overflow","padding","paddingBottom","paddingHorizontal","paddingLeft","paddingRight","paddingTop","paddingVertical","position","resizeMode","right","rotation","scaleX","scaleY","shadowColor","shadowOffset","shadowOpacity","shadowRadius","textAlign","textDecorationColor","textDecorationLine","textDecorationStyle","tintColor","top","transform","transformMatrix","translateX","translateY","width","writingDirection"

Next, let's explain it one by one. However, before that, we need to explain several usage methods of style sheets in React.

Style Declaration

var styles = StyleSheet.create({  base: {    width: 38,    height: 38,  },  background: {    backgroundColor: '#222222',  },  active: {    borderWidth: 2,    borderColor: '#00ff00',  },});

Use Style

 
  " data-snippet-id="ext.aa509d6f30a32f005f24a8d6e4ff9d13" data-snippet-saved="false" data-codota-status="done">
  
   
    
   
 

You can also receive an array

You can also apply styles based on conditions.

" data-snippet-id="ext.3bbd9d8827ab51d4f76bc1d214047d14" data-snippet-saved="false" data-codota-status="done">
  

Assume thatThis. state. activeTrue,Styles. activeIt will be applied. If it is false,Styles. activeWill not be applied.

Of course, the following statements are also supported.

" data-snippet-id="ext.f05f6af519aa220be500507b7324e73e" data-snippet-saved="false" data-codota-status="done">
  

Next, let's talk about the specific attributes in the style sheet.

Positioning

Positioning is classified into relative positioning and absolute positioning. The attribute name isPosition, The property value isAbsoluteAndRelative.

When the absolute layout is used, positioning is performed based on the screen.

Var AwesomeProject = React. createClass ({render: function () {return (
          
           
            
             
       
      ) ;},}); Var styles = StyleSheet. create ({container: {flex: 1, backgroundColor: '# ff0' // yellow}, box1: {width: 50, height: 50, backgroundColor:' # f00 ', // red position: 'absolute ', left: 30, // 30 units left of the screen}, box2: {width: 50, height: 50, backgroundColor: '#0f0', // green position: 'absolute ', top: 30, // 30 units above the screen side}, box3: {width: 50, height: 50, backgroundColor: '# f0f', // purple position: 'absolute', right: 30, // 30 units to the right of the screen}, box4: {width: 50, height: 50, backgroundColor: '# 00f', // blue position: 'absolute', bottom: 30 // 30 units down the screen }});
     
    
   
  

As follows.

When the corresponding value is negative, the direction is opposite to the original direction, that is, if tZ limit? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> vcM6qLTUwo6zU8rvh1fu49tLGs/a1vcbBxLvN4qOoz/fill + DQo8cD7Ex8O0z + fill" brush: java; ">Var AwesomeProject = React. createClass ({render: function () {return ( ) ;},}); Var styles = StyleSheet. create ({container: {flex: 1, backgroundColor: '# ff0' // yellow}, box1: {width: 50, height: 50, backgroundColor:' # f00 ', // red position: 'relative ', left: 30, top: 30 ,},});

You can see that after top and left are set, 30 units are moved downward to the right relative to the position without positioning. If the value is negative, it is also moved to the opposite direction.

But what if right and bottom are set?

Var styles = StyleSheet. create ({container: {flex: 1, backgroundColor: '# ff0' // yellow}, box1: {width: 50, height: 50, backgroundColor:' # f00 ', // red position: 'relative ', right: 30, bottom: 30 ,},});

In fact, the result is that the top and left values are negative. 30 units to the right of the original position, 30 units to the bottom of the original position, that is, 30 units to the left. The original location is the location when positioning is not used.

By default, relative positioning is used.

Border Width

BorderBottomWidth // Bottom Border Width borderLeftWidth // Left Border Width borderRightWidth // right Border Width borderTopWidth // top Border Width borderWidth // all Border Width

You can set the width of all borders or specify the width of an edge.

Border color

Same Border Width attribute. The attribute value is a string-type rgb representation.

borderBottomColorborderLeftColorborderRightColorborderTopColorborderColor

Margin

marginBottommarginLeftmarginRightmarginTopmarginVerticalmarginHorizontalmargin

It is worth noting that marginVertical is equivalent to setting marginTop and marginBottom at the same time, marginHorizontal is equivalent to setting marginLeft and marginRight at the same time, and margin is equivalent to setting four

Padding

paddingBottom  paddingLeft  paddingRight  paddingTop  paddingVerticalpaddingHorizontal  padding 

Background Color

Background color. The attribute value is a string-type rgb representation.

backgroundColor

Border rounded corner

borderTopLeftRadiusborderTopRightRadiusborderBottomLeftRadiusborderBottomRightRadiusborderRadius

Width and height

width height

Flex layout problems

For more information, see the Flex layout Tutorial: syntax and Flex layout Tutorial: instance. I personally think it is very clear.

flex number flexDirection enum('row', 'column') flexWrap enum('wrap', 'nowrap') alignItems enum('flex-start', 'flex-end', 'center', 'stretch') alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 

Font-related attributes

Color fontFamily fontSize fontStyle font style, normal, skewed, etc., value: enum ('normal', 'italic ') fontWeight font width, value: enum ("normal", 'bold ', '000000', '000000', '000000', '000000', '000000', '000000', '000000 ', '100', '100') letterSpacing character interval lineHeight Line High textAlign font alignment, value: enum ("auto", 'left', 'right', 'center ', 'justify ') textDecorationLine looks ineffective, font modifier, Dash, underline, strikethrough, no modifier, value: enum ("none", 'underline', 'Line-inter ', 'underline line-through ') TextDecorationStyle enum ("solid", 'double', 'dotted', 'dashed') seems ineffective. The textDecorationColor of the modified line seems ineffective, the color of the modified line writingDirection enum ("auto", 'ltr', 'rtl ') does not know what attributes, writing direction? From left to right? From right to left?

Image attributes

ResizeMode enum ('cover', 'containin', 'Stretch ') whether the excess part of overflow enum ('visable', 'hiddy') is displayed. hidden colors hidden tintColor, opacity transparency of rgb string type

The three attributes in resizeMode. contain indicates that the image is included in the specified area regardless of the image type. If the width and height are greater than the image size, the image is displayed in the center. Otherwise, the image is displayed in a reduced aspect ratio.

The test code is as follows:

Var AwesomeProject = React. createClass ({render: function () {return (
             
  ) ;},}); Var styles = StyleSheet. create ({container: {backgroundColor: '# ff0' // yellow}, img: {flex: 1, height: 150, resizeMode: "contain "},});

As shown in

Change the height to 50, and then scale down

Cover refers to the display according to the actual size, and the excess part is cropped. After the property value is changed to cover

Stretch refers to the effect of stretching the image and changing the attribute value to stretch, as shown in

Image Transformation

ScaleX: horizontal scaling scaleY: Vertical Scaling rotation: rotating translateX: horizontal Pan translateY: horizontal pan

Shadow

shadowColorshadowOffsetshadowOpacityshadowRadius