react-native

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@json-render/react-native

React Native renderer that converts JSON specs into native mobile component trees with standard components, data binding, visibility, actions, and dynamic props.

一款React Native渲染器，可将JSON规范转换为包含标准组件、数据绑定、可见性控制、交互动作和动态属性的原生移动组件树。

Quick Start

快速开始

typescript

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react-native/schema";
import {
  standardComponentDefinitions,
  standardActionDefinitions,
} from "@json-render/react-native/catalog";
import { defineRegistry, Renderer, type Components } from "@json-render/react-native";
import { z } from "zod";

// Create catalog with standard + custom components
const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    Icon: {
      props: z.object({ name: z.string(), size: z.number().nullable(), color: z.string().nullable() }),
      slots: [],
      description: "Icon display",
    },
  },
  actions: standardActionDefinitions,
});

// Register only custom components (standard ones are built-in)
const { registry } = defineRegistry(catalog, {
  components: {
    Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
  } as Components<typeof catalog>,
});

// Render
function App({ spec }) {
  return (
    <StateProvider initialState={{}}>
      <VisibilityProvider>
        <ActionProvider handlers={{}}>
          <Renderer spec={spec} registry={registry} />
        </ActionProvider>
      </VisibilityProvider>
    </StateProvider>
  );
}

typescript

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react-native/schema";
import {
  standardComponentDefinitions,
  standardActionDefinitions,
} from "@json-render/react-native/catalog";
import { defineRegistry, Renderer, type Components } from "@json-render/react-native";
import { z } from "zod";

// Create catalog with standard + custom components
const catalog = defineCatalog(schema, {
  components: {
    ...standardComponentDefinitions,
    Icon: {
      props: z.object({ name: z.string(), size: z.number().nullable(), color: z.string().nullable() }),
      slots: [],
      description: "Icon display",
    },
  },
  actions: standardActionDefinitions,
});

// Register only custom components (standard ones are built-in)
const { registry } = defineRegistry(catalog, {
  components: {
    Icon: ({ props }) => <Ionicons name={props.name} size={props.size ?? 24} />,
  } as Components<typeof catalog>,
});

// Render
function App({ spec }) {
  return (
    <StateProvider initialState={{}}>
      <VisibilityProvider>
        <ActionProvider handlers={{}}>
          <Renderer spec={spec} registry={registry} />
        </ActionProvider>
      </VisibilityProvider>
    </StateProvider>
  );
}

Standard Components

标准组件

Layout

布局

```
Container
```
- wrapper with padding, background, border radius
```
Row
```
- horizontal flex layout with gap, alignment
```
Column
```
- vertical flex layout with gap, alignment
```
ScrollContainer
```
- scrollable area (vertical or horizontal)
```
SafeArea
```
- safe area insets for notch/home indicator
```
Pressable
```
- touchable wrapper that triggers actions on press
```
Spacer
```
- fixed or flexible spacing
```
Divider
```
- thin line separator

```
Container
```
- 带有内边距、背景、圆角的容器
```
Row
```
- 支持间距、对齐设置的水平弹性布局
```
Column
```
- 支持间距、对齐设置的垂直弹性布局
```
ScrollContainer
```
- 可滚动区域（垂直或水平）
```
SafeArea
```
- 适配刘海屏/底部指示条的安全区域内边距
```
Pressable
```
- 点击时触发动作的可触摸容器
```
Spacer
```
- 固定或弹性间距占位
```
Divider
```
- 细线分隔符

Content

内容

```
Heading
```
- heading text (levels 1-6)
```
Paragraph
```
- body text
```
Label
```
- small label text
```
Image
```
- image display with sizing modes
```
Avatar
```
- circular avatar image
```
Badge
```
- small status badge
```
Chip
```
- tag/chip for categories

```
Heading
```
- 标题文本（1-6级）
```
Paragraph
```
- 正文文本
```
Label
```
- 小型标签文本
```
Image
```
- 支持多种缩放模式的图片展示
```
Avatar
```
- 圆形头像图片
```
Badge
```
- 小型状态徽章
```
Chip
```
- 用于分类的标签/芯片组件

Input

输入

```
Button
```
- pressable button with variants
```
TextInput
```
- text input field
```
Switch
```
- toggle switch
```
Checkbox
```
- checkbox with label
```
Slider
```
- range slider
```
SearchBar
```
- search input

```
Button
```
- 支持多种样式的可点击按钮
```
TextInput
```
- 文本输入框
```
Switch
```
- 切换开关
```
Checkbox
```
- 带标签的复选框
```
Slider
```
- 范围滑块
```
SearchBar
```
- 搜索输入框

Feedback

反馈

```
Spinner
```
- loading indicator
```
ProgressBar
```
- progress indicator

```
Spinner
```
- 加载指示器
```
ProgressBar
```
- 进度指示器

Composite

复合

```
Card
```
- card container with optional header
```
ListItem
```
- list row with title, subtitle, accessory
```
Modal
```
- bottom sheet modal

```
Card
```
- 可选带头部的卡片容器
```
ListItem
```
- 带有标题、副标题、辅助元素的列表行
```
Modal
```
- 底部弹出层模态框

Visibility Conditions

可见性条件

Use

visible

on elements. Syntax:

{ "$state": "/path" }

{ "$state": "/path", "eq": value }

{ "$state": "/path", "not": true }

[ cond1, cond2 ]

for AND.

在元素上使用

visible

属性。语法：

{ "$state": "/path" }

、

{ "$state": "/path", "eq": value }

、

{ "$state": "/path", "not": true }

，使用

[ cond1, cond2 ]

表示逻辑与。

Pressable + setState Pattern

Pressable + setState 模式

Use

Pressable

with the built-in

setState

action for interactive UIs like tab bars:

json

{
  "type": "Pressable",
  "props": {
    "action": "setState",
    "actionParams": { "statePath": "/activeTab", "value": "home" }
  },
  "children": ["home-icon", "home-label"]
}

将

Pressable

与内置的

setState

动作搭配使用，可实现标签栏等交互UI：

json

{
  "type": "Pressable",
  "props": {
    "action": "setState",
    "actionParams": { "statePath": "/activeTab", "value": "home" }
  },
  "children": ["home-icon", "home-label"]
}

Dynamic Prop Expressions

动态属性表达式

Any prop value can be a data-driven expression resolved at render time:

{ "$state": "/state/key" }
- reads from state model (one-way read)
{ "$bindState": "/path" }
- two-way binding: use on the natural value prop (value, checked, pressed, etc.) of form components.
{ "$bindItem": "field" }
- two-way binding to a repeat item field. Use inside repeat scopes.

{ "$cond": <condition>, "$then": <value>, "$else": <value> }
- conditional value

json

{
  "type": "TextInput",
  "props": {
    "value": { "$bindState": "/form/email" },
    "placeholder": "Email"
  }
}

Components do not use a

statePath

prop for two-way binding. Use

{ "$bindState": "/path" }

on the natural value prop instead.

任意属性值都可以是数据驱动的表达式，在渲染时实时解析：

{ "$state": "/state/key" }
- 从状态模型读取数据（单向读取）
{ "$bindState": "/path" }
- 双向绑定：用于表单组件的原生值属性（value、checked、pressed等）
{ "$bindItem": "field" }
- 与循环渲染的条目字段双向绑定，需在循环作用域内使用

{ "$cond": <condition>, "$then": <value>, "$else": <value> }
- 条件返回值

json

{
  "type": "TextInput",
  "props": {
    "value": { "$bindState": "/form/email" },
    "placeholder": "Email"
  }
}

组件无需使用

statePath

属性实现双向绑定，直接在原生值属性上使用

{ "$bindState": "/path" }

即可。

Built-in Actions

内置动作

The

setState

action is handled automatically by

ActionProvider

and updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions:

json

{ "action": "setState", "actionParams": { "statePath": "/activeTab", "value": "home" } }

setState

动作由

ActionProvider

自动处理，会直接更新状态模型，进而重新计算可见性条件和动态属性表达式：

json

{ "action": "setState", "actionParams": { "statePath": "/activeTab", "value": "home" } }

Providers

提供者

Provider	Purpose
`StateProvider`	Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode.
`ActionProvider`	Handle actions dispatched from components
`VisibilityProvider`	Enable conditional rendering based on state
`ValidationProvider`	Form field validation

提供者	用途
`StateProvider`	跨组件共享状态（JSON Pointer路径）。接受可选的 `store` 属性用于受控模式。
`ActionProvider`	处理组件派发的动作
`VisibilityProvider`	支持基于状态的条件渲染
`ValidationProvider`	表单字段校验

External Store (Controlled Mode)

外部存储（受控模式）

Pass a

StateStore

StateProvider

(or

JSONUIProvider

createRenderer

) to use external state management:

tsx

import { createStateStore, type StateStore } from "@json-render/react-native";

const store = createStateStore({ count: 0 });

<StateProvider store={store}>{children}</StateProvider>

store.set("/count", 1); // React re-renders automatically

When

store

is provided,

initialState

and

onStateChange

are ignored.

向

StateProvider

（或

JSONUIProvider

createRenderer

）传入

StateStore

即可使用外部状态管理：

tsx

import { createStateStore, type StateStore } from "@json-render/react-native";

const store = createStateStore({ count: 0 });

<StateProvider store={store}>{children}</StateProvider>

store.set("/count", 1); // React会自动重新渲染

当提供

store

时，

initialState

和

onStateChange

会被忽略。

Key Exports

核心导出项

Export	Purpose
`defineRegistry`	Create a type-safe component registry from a catalog
`Renderer`	Render a spec using a registry
`schema`	React Native element tree schema
`standardComponentDefinitions`	Catalog definitions for all standard components
`standardActionDefinitions`	Catalog definitions for standard actions
`standardComponents`	Pre-built component implementations
`createStandardActionHandlers`	Create handlers for standard actions
`useStateStore`	Access state context
`useStateValue`	Get single value from state
`useBoundProp`	Two-way state binding via `$bindState` / `$bindItem`
`useStateBinding`	(deprecated) Legacy two-way binding by path
`useActions`	Access actions context
`useAction`	Get a single action dispatch function
`useUIStream`	Stream specs from an API endpoint
`createStateStore`	Create a framework-agnostic in-memory `StateStore`
`StateStore`	Interface for plugging in external state management

导出项	用途
`defineRegistry`	基于组件目录创建类型安全的组件注册表
`Renderer`	使用注册表渲染指定规范
`schema`	React Native元素树结构规范
`standardComponentDefinitions`	所有标准组件的目录定义
`standardActionDefinitions`	标准动作的目录定义
`standardComponents`	预构建的组件实现
`createStandardActionHandlers`	为标准动作创建处理函数
`useStateStore`	访问状态上下文
`useStateValue`	从状态中获取单个值
`useBoundProp`	通过 `$bindState` / `$bindItem` 实现双向状态绑定
`useStateBinding`	(已废弃) 旧版按路径实现的双向绑定
`useActions`	访问动作上下文
`useAction`	获取单个动作派发函数
`useUIStream`	从API端点流式获取界面规范
`createStateStore`	创建框架无关的内存级 `StateStore`
`StateStore`	用于接入外部状态管理的接口