React Native's styles are based on the open source cross-platform layout engine Yoga , which basically implements a subset of CSS, and the property names are not identical, so when you start thinking about compatibility with the React Native side, you can take a brief look at A quick look at React Native styles. React Native Layout Props

Style layout on H5 is the most flexible, the next mini program, RN is the strongest, unified style that is aligned with the short board, that is, to manage the style with the constraints of RN, while taking into account the limitations of the mini program, the core can be summarized in three points.

• Layout with Flex
• Writing styles based on BEM
• Overriding component styles with the style attribute

一、Layout

flex

Flexbox rules are used in React Native to specify the layout of a component's child elements. flexbox can provide a consistent layout structure across screen sizes. So if you're thinking about the React Native, then your style layout will have to be a Flex layout.

For an introduction to Flex layouts, check out ruanyifeng Flex Layout Tutorial: Syntax

Note: The default orientation of the View tag in RN is column. If you don't change the other ends to be consistent with RN, you need to explicitly declare the orientation of the main axis in all places where display: flex is used.

position

In React Native position only supports two properties,

    Text

1 (default) and

    Text

2. You can

二、Styles

Selectors

Only class selectors are supported on the React Native side, and combinators are not supported Combinators and groups of selectors。

The following selectors are written in a way that they are not supported and will be automatically ignored during style conversions.

.button.button_theme_islands {
  font-style: bold;
}

img + p {
  font-style: bold;
}

p ~ span {
  color: red;
}

div > span {
  background-color: DodgerBlue;
}

div span {
  background-color: DodgerBlue;
}

If we develop based on a pre-compiled language such as

    Text

3, we can write styles based on BEM eg:

    Text

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

Conditional compilation of styles

1.3+ Versions Supported

Conditional compilation of style files

Suppose the following files exist in the directory at the same time.

index.scss
index.rn.scss

When referencing a style file in a JS file:

    Text

4, the RN platform will find and introduce

    Text

5, and other platforms will introduce:

    Text

6, which is convenient for you to write cross-end style and better compatible with RN.

Conditional compilation of style code

To make it easier to write style code across styles, the style conditional compilation feature has been added.

Designated platform reserved:

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

Designated platform exclusion.

/*  
# ifndef  %PLATFORM%  */
style code
/*  
# endif  */

Multiple platforms can be separated by spaces.

Global introduction of styles

• 1. The style introduced in the entry file app.js is the global style, and the local style will override the global style.
• 1. Global injection through configuration

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

三、Navigation

React Native Navigation is encapsulated in React-Navigation 6.x. To better facilitate business customization, the configuration of React Navigation is passed through in the global and page configuration, but note that the following navigation-related settings Taro 3.x are in effect.

Global Configuration

A separate configuration for rn navigation can be added in the global configuration app.config.js

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

Page Config

In addition to the global settings page, you can also set up a page individually.

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

There are some things to note about the configuration of pass-through react navigation. Directly passing in parameters of React.Node nodes is not supported The style object passed in is a React Native style such as tabStyle:{ backgroundColor :'

ff0000'}

• rn's configuration takes precedence over other configurations, e.g. if the selectedColor is configured in the unified tabBar and activeTintColor in rn's configuration, then the activeTintColor is the one that takes effect

Frequently Asked Questions

1. Can box-shadow be implemented?

React Native doesn't support this well (only ios supports it and to a limited extent), and the only way to set the gray shadows on the android side is through

Text

7.

{
    /* Shadow related properties */
    shadowOffset: {width: 0, height: 5},
    shadowOpacity: 0.5,
    shadowRadius: 5,
    shadowColor: Color.CMHeaderBgColor,
    /* android gray shadows */
    elevation: 4,
}

2、border{Top,Right,Bottom,Left} not supported ?

The shorthand for border{Top,Right,Bottom,Left} (shorthands) is not supported, because

    Text

8 cannot be applied to a single border.

Use sass：

    Text

0

3. React Native doesn't support background-image, is there any solution?s

Using the

    Text

9, in conjunction with the Flex/Position layout, will basically accomplish most of your needs. Read this article.Background Images in React Native

Support for each property

React Native's styles are based on the open source cross-platform layout engine Yoga, The style is basically a subset of CSS, but the property names are not identical, so check the documentation for details and differences React Native Layout Props。

Text （18）

Property NameValueDescriptioncolorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 color propertyfontFamilystringCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 font-family propertyfontSizeCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 font-size propertyfontStyle

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

3,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

4对应

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 font-style 属性，但阉割了

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

6 取值fontWeight

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

3,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

8

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

9Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 font-weight property，But the

index.scss
index.rn.scss

1 fetch is neuteredlineHeightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 line-height propertytextAlign

index.scss
index.rn.scss

3,

index.scss
index.rn.scss

4,

index.scss
index.rn.scss

5,

index.scss
index.rn.scss

6,

index.scss
index.rn.scss

7

index.scss
index.rn.scss

8Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-align property,Added

index.scss
index.rn.scss

3 fetch value. When the value is

index.scss
index.rn.scss

7, it will change to

index.scss
index.rn.scss

4 on

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

3.textDecorationLine

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

4,

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

5,

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

6,

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

7Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-decoration-line property，But the

index.scss
index.rn.scss

1 fetch is neuteredtextShadowColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-shadow the color definition in the propertiestextShadowOffset{ width:, height: }Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-shadow shadow offset definition in the propertiestextShadowRadiusIn

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0, the size of the rounded corners of the shadow depends on the element's rounded corner definition and does not need to be defined additionallyincludeFontPadding

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

3By default, Android reserves some extra padding for text to allow room for superscript or subscript text. For some fonts, this extra padding may make it difficult to center the text vertically. If you set

/*  
# ifndef  %PLATFORM%  */
style code
/*  
# endif  */

4 to

index.scss
index.rn.scss

6 and the text still looks off-center, try setting this property to

/*  
# ifndef  %PLATFORM%  */
style code
/*  
# endif  */

6.textAlignVertical

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

3

index.scss
index.rn.scss

3,

/*  
# ifndef  %PLATFORM%  */
style code
/*  
# endif  */

9,

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

0,

index.scss
index.rn.scss

6Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 vertical-align property, Added

index.scss
index.rn.scss

3 fetch,

index.scss
index.rn.scss

6 replaces

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

5, and neutered

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

6 and other valuesfontVariant

index.scss
index.rn.scss

8

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

8,

// config/index.js
...
const config = {
    ...
    sass: {
        resource: [
            'src/styles/common.scss'
        ]
    }
}

9,

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

0,

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

1,

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

2Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 font-variant property, but which has more valuesletterSpacing

index.scss
index.rn.scss

8Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 letter-spacing propertytextDecorationColor

index.scss
index.rn.scss

8Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-decoration-color propertytextDecorationStyle

index.scss
index.rn.scss

8

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

9,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

0,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

1,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

2Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 text-decoration-style propery, But the

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

4 fetch is neuteredwritingDirection

index.scss
index.rn.scss

8

index.scss
index.rn.scss

3,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

7,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

8Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 direction propery, Added

index.scss
index.rn.scss

3 fetch value

Dimension (6)

Propery NameValuesDescriptionwidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 width properyminWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 min-width properymaxWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 max-width properyheightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 height properyminHeightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 min-height properymaxHeightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 max-height propery

Positioning （6）

Propery NameValuesDescriptionposition

    Text

2,

    Text

1Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 position propery, but without the

    Text

00 fetchtopCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 top properyrightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 right properybottomCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 bottom properyleftCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 left properyzIndexCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 z-index propery

Margin（7）

Propery NameValuesDescriptionmarginCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 margin property, the difference is that it can only define one parameter, if you want to define the external white of

    Text

07 4 directions respectively, you can use the following one-way external white propertymarginHorizontalNo corresponding

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 property. The effect is equivalent to setting both

    Text

09 and

    Text

10marginVerticalNo corresponding

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 property. The effect is equivalent to setting both

    Text

12 and

    Text

13marginTopCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 margin-top propertymarginRightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 margin-right propertymarginBottomCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 margin-bottom propertymarginLeftCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 margin-left property

Padding（7）

Propery NameValuesDescriptionpaddingCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 padding property, The difference is that it can only define one parameter, if you want to define the internal white of

    Text

07 4 directions respectively, you can use the following one-way internal white propertypaddingHorizontalThere is no corresponding

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 property. This has the effect of setting both

    Text

21 and

    Text

22 at the same timepaddingVerticalNo corresponding

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 property. The effect is equivalent to setting both

    Text

24 and

    Text

25.paddingTopCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 padding-top propertypaddingRightCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 padding-right propertypaddingBottomCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 padding-bottom propertypaddingLeftCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 padding-left property

Border （20）

Propery NameValuesDescriptionborderStyle

// To have an impact on the other side, it is better to add environmental judgments

let rnConfig = {}

if(process.env.TARO_ENV === 'rn'){
  rnConfig = {
  //deep Linking perfix, https://reactnavigation.org/docs/deep-linking
  linking:[],
  //tabBar page config ，https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar options config，the following property pass-through is supported, and the scheme that returns the react.Node node settings is not supported
   options:{
      title，
      tabBarVisible，
      tabBarBadge，
      tabBarBadgeStyle，
      tabBarTestID
   },
   tabBarOptions:{//tabbarOptions config ,other see https://reactnavigation.org/docs/bottom-tab-navigator/
# tabbar tabBarOptions
       
   },
   screenOptions:{//Global screenOptions， which works on non-all pages, note that it does not support returning React. For more references https://reactnavigation.org/docs/stack-navigator/
# options
       
   }
  }
}

export default {
  pages:[
    'pages/index/index',
  ],
  rn:rnConfig
}

9,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

1,

// page config
rn:{
  screenOptions:{// set curernt page options，For more references https://reactnavigation.org/docs/stack-navigator/
# options
        
    }
}

2Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

34 property，but with fewer

    Text

35 fetch values and no direction splitting propertyborderWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

37 propertyborderTopWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

39 propertyborderRightWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

41 propertyborderBottomWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

43 propertyborderLeftWidthCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

45 propertyborderColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

47 propertyborderTopColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

49 propertyborderRightColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

51 propertyborderBottomColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

53 propertyborderLeftColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

55 propertyborderRadiusCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

57 propertyborderTopLeftRadiusCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

59 propertyborderTopRightRadiusCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

61 propertyborderBottomLeftRadiusCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

63propertyborderBottomRightRadiusCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

65 propertyshadowColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 box-shadow the color definition in the propertyshadowOffset{ width: , height: }Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 box-shadow shadow offset definition in the propertiesshadowRadiusIn

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0, the size of the rounded corners of the shadow depends on the element's rounded corner definition and does not need to be defined additionallyshadowOpacityCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 box-shadow shadow transparency definition in the properties

Background (1)

Propery NameValuesDescriptionbackgroundColorCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

71 propery

Transform （3）

Propery NameValuesDescriptiontransform

    Text

72Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

74 propertytransformMatrix

    Text

75Similar to the

    Text

76 and

    Text

77 functions of the

    Text

74 property in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0backfaceVisibility

    Text

80,

    Text

81Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

    Text

83 propery

Flexbox （9）

We use Flexbox rules in React Native to specify the layout of a component's child elements, and Flexbox provides a consistent layout structure across screen sizes.

In general, most layout needs are met using the

    Text

84,

    Text

85, and

    Text

86 style properties.

Flex number

In React Native, flex behaves a bit differently than CSS. flex can only be an integer value in RN, please refer to the yoga engine documentation for details

ConditionsPerformanceWhen flex is set to a positive integer, e.g.

    Text

87The component is flexible and the size is proportional to the value of flex

    Text

88The component is not flexible, and the size and width and height are consistent

    Text

89If there is enough space, the size of the component is the same as width and height; however, when there is not enough space, the component is compressed to minWidth and minHeight

Flex Direction

Specifying flexDirection in the component's style determines the main axis of the layout. Should the child elements be aligned along the

    Text

90 or along the

    Text

91? The default value is

    Text

92 direction, which is different from CSS and should be noted.

Justify Content

Specifying justifyContent in the component's style determines how its child elements are arranged along the main axis. Should the child elements be distributed close to the beginning or the end of the main axis? Or should they be evenly distributed? The options are:

    Text

93,

index.scss
index.rn.scss

6,

    Text

95,

    Text

96 and

    Text

97.

Align Items

Specifying alignItems in the component's style determines how its child elements are arranged along the secondary axis (the axis perpendicular to the major axis, e.g. if the major axis is row, the secondary axis is column). Should the child elements be distributed near the beginning or the end of the secondary axis? Or should they be evenly distributed? The options are:

    Text

93,

index.scss
index.rn.scss

6,

    Text

95 and

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

01.

Propery NameValuesDescriptionflexCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

03 property，But only as integer valuesflexGrowCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

05 propertyflexShrinkCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

07 propertyflexBasisCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

09 propertyflexDirection

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

10,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

11,

    Text

92,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

13Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

15 propertyflexWrap

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

16,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

17Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

19 property, but the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

20 fetch is missingjustifyContent

    Text

93,

    Text

95,

index.scss
index.rn.scss

6,

    Text

97,

    Text

96Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

27 property，but the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

01 fetch is missingalignItems

    Text

93,

    Text

95,

index.scss
index.rn.scss

6,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

01Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

34 property，but the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

35 fetch is missingalignSelf

index.scss
index.rn.scss

3,

    Text

93,

    Text

95,

index.scss
index.rn.scss

6,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

01Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

42 property，but the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

35 fetch is missing

Other

Propery NameValuesDescriptionopacityCorresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

45 propertyoverflow

    Text

80,

    Text

81,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

48Corresponds to

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

50 property, but the

index.scss
index.rn.scss

3 fetch is missingelevation

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

3No corresponding property in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0, only available on

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

54resizeMode

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

55,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

56,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

01There is no equivalent property in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0, you can refer to the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

59 propertyoverlayColor

/*  
# ifdef  %PLATFORM%  */
style code
/*  
# endif  */

3stringThere is no equivalent property in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0 to fill the corners with a color when the image has rounded cornerstintColor

index.scss
index.rn.scss

8No corresponding property in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0, special color on

index.scss
index.rn.scss

8 images, change color of opaque pixels

Color

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

65 supports most of the color types in

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

0.

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }

  67 (

  rgb)

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }

  68 (

  rgba)：No corresponding value in

  .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  0

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }

  70 (

  rrggbb)

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }

  71 (

  rrggbbaa)：No corresponding value in

  .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  0

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  73

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  74

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  75

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  76

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  77

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }

  78 (0xrrggbbaa)：No corresponding value in

  .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  0

• .block: {

  background-color: DodgerBlue;  
  &__elem {  
      color: yellow;  
  }  
  

  }
  80：Support to and ，But not support ；

Specificity and inheritance

The introduction style of a component has a higher priority than the global style.

Selector

1. Basic selector only supports class selector
2. Not support the combination selector writing method
3. Not support for pseudo-classes and pseudo-elements

Shorthand properties

Only accepts values supported by React Native. For example, background accepts only one color,

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

81, because React Native's Background only supports the

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

81 property. properties supported by React Native can be found in the React Native stylesheet above.

Unit

Taro use PostCSS unit conversion plugin postcss-pxtransform will convert px to React Native's

.block: {
    background-color: DodgerBlue;
    &__elem {
        color: yellow;
    }
}

83, see the documentation for details on how to configure this.

What is left right top bottom in CSS?

The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.nullCSS Layout - The position Property - W3Schoolswww.w3schools.com › css › css_positioningnull

What is the bottom in React Native?

bottom ​ bottom is the number of logical pixels to offset the bottom edge of this component. It works similarly to bottom in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.26 thg 4, 2024nullLayout Props - React Nativereactnative.dev › docs › layout-propsnull

How do you position absolute in React Native?

You must specify the position style attribute for the element you wish to place to “absolute” in order to use absolute positioning in React-Native. The distance between the element and each of the container's boundaries can then be specified using the top, left, right, and bottom style parameters.25 thg 12, 2022nullAdvanced React-Native CSS Layout Techniques | by Big Zudezudemwango.medium.com › advanced-react-native-css-layout-techniques-...null

How to add empty space in React Native?

React Form - Add an Empty Space If you need to add an empty space between neighboring items, use an empty item. To create it, assign "empty" to the itemType property. To define how many columns the empty item must span, specify the colSpan property.nullAdd an Empty Space - React Form - DevExtreme - DevExpressjs.devexpress.com › UI_Components › Form › Organize_Simple_Itemsnull