React Native Common Component Styles Summary

As a JS, CSS, RN Novice, will always encounter a variety of styles. It is difficult to draw a layout well without knowing what the style is. So here are a few of the most common layout styles.

View Style

Supports Flexbox, Shadowproptypesios, transforms properties.

Back visibility

backfaceVisibility enum(‘visible‘, ‘hidden‘)

Background color

backgroundColor string

Border color

borderColor stringborderTopColor stringborderRightColor stringborderBottomColor stringborderLeftColor string

Border Fillet radius

borderRadius numberborderTopLeftRadius numberborderTopRightRadius numberborderBottomLeftRadius numberborderBottomRightRadius number

Border Style

borderStyle enum(‘solid‘, ‘dotted‘, ‘dashed‘)

Border width

borderWidth numberborderTopWidth numberborderRightWidth numberborderBottomWidth numberborderLeftWidth number

Opacity

opacity number

Fill

overflow enum(‘visible‘, ‘hidden‘)

Test ID (used to locate the view)

testID string

Image Style

Supports Flexbox and transforms

Sizing mode

resizeMode Object.keys(ImageResizeMode)

Background color

backgroundColor string

Border properties

borderColor stringborderWidth numberborderRadius number

Fill

overflow enum(‘visible‘, ‘hidden‘)

Color colors

tintColor string

Opacity

opacity number

Text Style

Styles that support view

Font Color

color string

Font

fontFamily string

Font size

fontSize number

Font style

fontStyle enum(‘normal‘, ‘italic‘)

Font weight (Specifies the weight of the font.) Most fonts support the ' normal ' and ' bold ' values. Not all fonts support all numeric values. If a value is not supported, the closest value is automatically selected. ）

fontWeight enum("normal", ‘bold‘, ‘100‘, ‘200‘, ‘300‘, ‘400‘, ‘500‘, ‘600‘, ‘700‘, ‘800‘, ‘900‘)

Word spacing

letterSpacing number

Line spacing

lineHeight number

Font Alignment (specifies how text is aligned.) Where the ' justify ' value is only supported by iOS. ）

textAlign enum("auto", ‘left‘, ‘right‘, ‘center‘, ‘justify‘)

Flexbox Style

Wide Height

width numberheight number

Project Alignment

alignItems enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)

Self-aligning

alignSelf enum(‘auto‘, ‘flex-start‘, ‘flex-end‘, ‘center‘, ‘stretch‘)

Border width

borderBottomWidth numberborderLeftWidth numberborderRightWidth numberborderTopWidth numberborderWidth number

Elastic Scaling

flex number

Elastic Telescopic Direction

flexDirection enum(‘row‘, ‘column‘)

Elastic Telescopic Package

flexWrap enum(‘wrap‘, ‘nowrap‘)

Proof content

justifyContent enum(‘flex-start‘, ‘flex-end‘, ‘center‘, ‘space-between‘, ‘space-around‘)

Outer margin

margin numbermarginBottom numbermarginLeft numbermarginRight numbermarginTop numbermarginHorizontal numbermarginVertical number

Inner margin

padding numberpaddingBottom numberpaddingLeft numberpaddingRight numberpaddingTop numberpaddingHorizontal numberpaddingVertical number

Position (absolute, relative)

position enum(‘absolute‘, ‘relative‘)

Up or down

right numbertop numberleft numberbottom number

Transform

Property changes

Attribute matrix

Resources

React native Chinese web

React Native Common Component Styles Summary