Mpx Cross-Platform Output to RN Style Development Guide

Background Introduction

Mpx is a cross-platform development framework based on WeChat Mini Program syntax with Vue-like syntax extension support. It supports outputting the same set of code to mini programs (WeChat, Alipay, Baidu, etc.), Web, and React Native platforms. Although Mpx has achieved a certain degree of cross-platform unification of style capabilities at compile time and runtime, there are still significant differences in style capability support when outputting to RN compared to mini programs and Web platforms. This document details the style capability support when Mpx outputs to RN, as well as best practices for style compatibility during cross-platform development.

Mpx uses Vue-like single-file component (SFC) format

.mpx

for component and page definition. For details, see: Mpx Single-File Component

Knowledge Base Guidelines

Read the following reference documents according to specific scenarios:

Style Capability Reference: When users ask about details of Mpx2RN style capability support, encounter issues such as styles not taking effect or style errors, or conduct cross-platform style adaptation development, read Cross-Platform Output to RN Style Capability Support Details
Development Best Practices: When users ask about Mpx2RN style development best practices, inquire how to achieve a certain style effect, or check if there is a compatibility solution for unsupported style capabilities, read Cross-Platform Output to RN Style Development Best Practices

Cross-Platform Output to RN Style Adaptation Transformation

When users require style adaptation transformation of existing Mpx components for cross-platform output to RN, follow the following processes and constraints.

Input

{name}.mpx

component written based on mini program technical specifications.

Output

Follow the user's instructions. If there are no special instructions, modify the original

{name}.mpx

file by default. When outputting the modified code, output the complete component code, avoid using ellipsis, and ensure that users can directly copy or apply the modifications.

Constraint Guidelines

Strictly follow the following constraint guidelines during style adaptation transformation:

Single Class Selector (Example): Compound selectors (e.g.,
```
.list .item
```
) are prohibited. They must be converted to equivalent implementations with single class names (e.g.,
```
.list-item
```
), and ensure that corresponding references in the
```
<template>
```
structure and
```
<script>
```
(such as
```
createSelectorQuery
```
) are updated synchronously.

Bad Example:

<style> .list .item { color: red; } </style>

Good Example:

<style> .list-item { color: red; } </style>

For dynamic binding of template style class names, use
```
wx:style
```
and
```
wx:class
```
template directives as much as possible, and avoid using
```
{{}}
```
interpolation expressions for dynamic binding in
```
style
```
and
```
class
```
attributes.

Bad Example:

<view class="item {{isActive ? 'active' : ''}}">

Good Example:

<view class="item" wx:class="{{ {active: isActive} }}">

Reduce the use of conditional compilation unless necessary, prioritize cross-platform compatible implementations, avoid large areas of continuous conditional compilation as this will seriously damage code readability and maintainability.
Retain the
/*use rpx*/
and
/*use px*/
comments in the original style definitions. Such comments are used to batch switch style units during compilation.

Task Process

Selector Adaptation Transformation:

Analyze the
```
<style>
```
part of the component. For preprocessors that support nested selectors such as
```
sass
```
,
```
less
```
,
```
stylus
```
, first expand all nested selector syntax in the original code into traditional selector syntax to facilitate subsequent compatibility judgment and adaptation transformation.
- Bad Example (Nested Selectors Not Expanded):
  less
```
.list {
  .item {
    color: red;
    &.active {
      color: blue;
    }
  }
}
```
- Good Example (Nested Selectors Expanded):
  less
```
.list .item { color: red; }
.list .item.active { color: blue; }
```

Analyze the

<style>

part of the component, refer to Mpx Cross-Platform Output to RN Style Development Best Practices#Selector Usage Recommendations, replace selectors not supported by the RN platform with equivalent implementations using single class selectors, and update corresponding class name references in

<template>

and

<script>

synchronously.

Good Example (Equivalent Implementation with Single Class Selector):

html

<!-- Recommended: Directly use equivalent single class names and use wx:class for dynamic binding -->
<view class="list-item" wx:class="{{ { 'list-item-active': isActive } }}">
  <text class="title">Title</text>
</view>

css

/* Recommended to use single class selectors, avoid descendant selectors and intersection selectors */
.list-item { padding: 20rpx; }
.list-item-active { color: red; }

For selectors that cannot be replaced with equivalent implementations using single class selectors, use platform-specific conditional compilation to locally wrap the selector style fragment, retain it in the original platform output product, and add a
```
todo
```
comment to record details of incompatibility with the RN platform.
- Good Example (Local Conditional Compilation):
  css
```
/* @mpx-if (__mpx_mode__ === 'wx' || __mpx_mode__ === 'ali' || __mpx_mode__ === 'web') */
/* todo: RN does not support adjacent sibling selectors, retained only in the original platform */
.item + .item { margin-top: 10rpx; }
/* @mpx-endif */
```

Style Property Adaptation Transformation:

Refer to Cross-Platform Output to RN Style Capability Support Details, analyze the style properties defined in
```
<style>
```
,
```
<template>
```
and
```
<script>
```
. For style properties not supported by the RN platform, replace them with cross-platform compatible equivalent implementations combined with Mpx Cross-Platform Output to RN Style Development Best Practices.
- Good Example (Cross-Platform Equivalent Implementation of display: none):
  css
```
.mask {
  /* @mpx-if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') */
  flex: 0;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  /* @mpx-else */
  display: none;
  /* @mpx-endif */
}
```
For style properties that cannot be replaced with cross-platform compatible equivalent implementations, use platform-specific conditional compilation to locally wrap the style property, retain it in the original platform output product, and add a
```
todo
```
comment to record details of incompatibility with the RN platform.
- Good Example (Local Conditional Compilation):
  css
```
.animation-box {
  /* @mpx-if (__mpx_mode__ === 'wx' || __mpx_mode__ === 'ali' || __mpx_mode__ === 'web') */
  /* todo: RN does not support keyframe animations, retained only in the original platform */
  animation: slideIn 0.5s ease-in-out;
  /* @mpx-endif */
}
```

Inspection and Confirmation:

Check to ensure that there are no nested selector syntax in
```
<style>
```
.
Check to ensure that all selectors not supported by the RN platform in
```
<style>
```
have been replaced with equivalent implementations using single class selectors, or wrapped with platform-specific conditional compilation, and the output to RN does not contain compound selectors.
Check to ensure that all style properties not supported by the RN platform in
```
<style>
```
,
```
<template>
```
and
```
<script>
```
have been replaced with cross-platform compatible equivalent implementations, or wrapped with platform-specific conditional compilation, and the output to RN does not contain unsupported style properties.
Check to ensure that there are no large areas of conditional compilation in
```
<style>
```
,
```
<template>
```
and
```
<script>
```
, and all added conditional compilation only minimally wraps incompatible style fragments.

mpx-rn-style-guide

NPX Install

Tags

SKILL.md Content (Chinese)