React Native Development Considerations

title: React Native Development Considerations

:::tip Taro 3 requires version 3.1 or higher :::

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, relative (default) and absolute. You can see the documentation

二、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 scss, we can write styles based on BEM eg:

<View className="block">
    <Text className="block__elem">Text</Text>
</View>

.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: import '. /index.scss', the RN platform will find and introduce index.rn.scss, and other platforms will introduce: index.scss, 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 ```js // config/index.js … const config = { … sass: { resource: [

        'src/styles/common.scss'

     ] } }

# 三、Navigation
React Native Navigation is encapsulated in React-Navigation 5.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
```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 elevation.

{
    /* 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 borderStyle cannot be applied to a single border.

Use sass：

/**
 * // NOTE Taro has a problem with border handling when compiling to RN
 * RN does not support setting style for one side, i.e. border-bottom-style will report an error.
 * Then border-bottom: 1px would need to be written as follows.
 * border: 0 style color; border-bottom-width: 1px;
 */
@mixin border($dir, $width, $style, $color) {
  border: 0 $style $color;
  @each $d in $dir {
    #{border-#{$d}-width}: $width;
  }
}

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

Using the Image component, 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）

Dimension (6)

Positioning （6）

Margin（7）

Padding（7）

Border （20）

Background (1)

Transform （3）

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 flexDirection, alignItems, and justifyContent 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

Flex Direction

Specifying flexDirection in the component’s style determines the main axis of the layout. Should the child elements be aligned along the horizontal axis (row) or along the vertical axis (column)? The default value is column 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: flex-start, center, flex-end, space-around and space-between.

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: flex-start, center, flex-end and stretch.

Other

Color

React Native supports most of the color types in CSS.

• #f00 (#rgb)
• #f00c (#rgba)：No corresponding value in CSS
• #ff0000 (#rrggbb)
• #ff0000cc (#rrggbbaa)：No corresponding value in CSS
• rgb(255, 0, 0)
• rgba(255, 0, 0, 0.9)
• hsl(360, 100%, 100%)
• hsla(360, 100%, 100%, 0.9)
• transparent
• 0xff00ff00 (0xrrggbbaa)：No corresponding value in CSS
• Color Name：Support to Basic color keywords and Expanded color keywords，But not support 28 system colors；

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, backgroundColor, because React Native’s Background only supports the backgroundColor 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 pt, see the documentation for details on how to configure this.