React Native中使用Json表单模式

okxuctiv  于 2022-12-04  发布在  React
关注(0)|答案(1)|浏览(107)

bounty将在3天后过期。回答此问题可获得+50的声望奖励。Praful Kadam正在寻找来自知名来源的答案

有没有什么方法可以让我在react native中使用json form模式和自定义渲染器(使用json模式来渲染react native UI元素)?我见过几个react native特定的包,它们是受json形式的启发,但不能让它们按照要求工作。
我也期待着使用它与yup形式验证包

  • 谢谢-谢谢
2ic8powd

2ic8powd1#

我认为您可以尝试react-jsonschema-formjson-schema-form-for-react-native +,您也可以使用yup表单验证包和这些包来验证表单数据。
react-jsonschema-form包使用自定义渲染器和yup验证的示例:

import React from 'react';
import { View } from 'react-native';
import { Form, Field } from 'react-jsonschema-form';
import * as yup from 'yup';

const schema = {
  type: 'object',
  properties: {
    firstName: { type: 'string', title: 'First Name' },
    lastName: { type: 'string', title: 'Last Name' },
  }
};

const uiSchema = {
  firstName: {
    'ui:placeholder': 'Enter your first name',
  },
  lastName: {
    'ui:placeholder': 'Enter your last name',
  },
};

const CustomInput = ({ type, value, onChange }) => (
  <TextInput
    value={value}
    onChangeText={text => onChange(text)}
  />
);

const CustomForm = () => (
  <Form
    schema={schema}
    uiSchema={uiSchema}
    validate={yup.object().shape(schema)}
    FieldTemplate={CustomInput}
  />
);

文件:https://github.com/mozilla-services/react-jsonschema-form

相关问题