@json-render/react-native 是一个 React Native 渲染器,用于把 JSON 规格(spec)转换成原生移动端组件树,支持标准组件、数据绑定、可见性条件、动作和动态属性。
用途
该渲染器面向需要在 React Native 应用中由 JSON 规格驱动界面渲染的场景。它以 @json-render/core 的 schema 和 catalog 机制为基础,把描述性的 JSON 结构解析为可运行的移动端组件树。
主要能力
- 标准组件:内置布局(Container、Row、Column、ScrollContainer、SafeArea、Pressable、Spacer、Divider)、内容(Heading、Paragraph、Label、Image、Avatar、Badge、Chip)、输入(Button、TextInput、Switch、Checkbox、Slider、SearchBar)、反馈(Spinner、ProgressBar)和复合组件(Card、ListItem、Modal)等类别。
- 可见性条件:在元素上使用 visible,语法包括 { "$state": "/path" }、带 eq 的状态比较、带 not 的取反,以及用数组表示 AND 组合条件。
- 动态属性表达式:属性值可以是渲染时解析的数据驱动表达式,例如 { "$state": "/state/key" } 单向读取、{ "$bindState": "/path" } 双向绑定、{ "$bindItem": "field" } 绑定重复项字段、{ "$cond": ... , "$then": ... , "$else": ... } 条件值。嵌套列表使用 { "repeat": { "statePath": { "$item": "comments" } } }。双向绑定应作用在表单组件自然的值属性(value、checked、pressed 等)上,而不是 statePath 属性。
- 内置动作:setState 动作由 ActionProvider 自动处理,直接更新状态模型,从而重新求值可见性条件和动态属性表达式。
- Provider:StateProvider(跨组件共享状态,接受可选 store 用于受控模式)、ActionProvider、VisibilityProvider、ValidationProvider(表单校验)。
- 外部存储:可将 StateStore 传给 StateProvider(或 JSONUIProvider / createRenderer)以使用外部状态管理;提供 store 时 initialState 和 onStateChange 会被忽略。
- 关键导出:defineRegistry、Renderer、schema、standardComponentDefinitions、standardActionDefinitions、standardComponents、createStandardActionHandlers、useStateStore、useStateValue、useBoundProp、useStateBinding(已废弃)、useActions、useAction、useUIStream、createStateStore、StateStore。
使用方式
快速开始需要先从 @json-render/core 引入 defineCatalog 和 schema,从 @json-render/react-native/catalog 引入 standardComponentDefinitions 与 standardActionDefinitions,从 @json-render/react-native 引入 defineRegistry、Renderer 和 Components 类型,并使用 zod 定义自定义组件的属性与插槽。用 defineCatalog 创建包含标准组件与自定义组件的 catalog,用 defineRegistry 注册自定义组件(标准组件已内置),最后通过 Renderer 渲染 spec。
交互式 UI(如标签栏)可使用 Pressable 配合内置 setState 动作,在 actionParams 中指定 statePath 和 value。动态属性表达式和双向绑定可直接写在组件属性中,例如将 TextInput 的 value 设为 { "$bindState": "/form/email" }。
适用场景
适用于希望用 JSON 描述来驱动 React Native 界面、在运行时根据状态动态显示或隐藏元素、或需要把表单输入与状态模型双向绑定的移动端开发场景。可通过 useUIStream 从 API 端点流式获取规格。
限制
资料未提供具体版本、安装命令、收费或许可信息,暂未提供。该渲染器的可用组件、动作与行为以 @json-render/react-native 包的实际实现为准。