Json表单模式在react native中的使用

Question

是否有任何方法我可以在react native中使用json表单模式与自定义渲染器(使用json模式来渲染react native UI元素)。我已经看到了几个特定于react native的包，它们受到json表单的启发，但无法使它们按照要求工作。

我也希望使用它与yup表单验证包

谢谢。

Answer 1

是的，在React Native应用程序中使用JSON表单模式和自定义渲染器来渲染React Native UI元素是可能的。有几个可用的包可以帮助你实现这一点，比如react-jsonschema-form和json-schema-form-generator。

要在React Native中使用JSON表单模式和自定义渲染器，你需要首先使用npm或yarn安装上面的一个包(或类似的包)。然后，您可以使用包提供的Form组件来定义表单模式并指定您想要使用的自定义呈现器。

例如，要使用react-jsonschema-form包，您可以这样做:

import { Form } from 'react-native-jsonschema-form';
const schema = {
// your JSON form schema here
};
const uiSchema = {
// your custom renderer here
};
const MyForm = () => (
<Form schema={schema} uiSchema={uiSchema} />
);

一旦定义了表单，就可以使用yup表单验证包在用户提交表单时验证表单值。为此，您可以使用Form组件的validate选项，传入一个yup验证模式来验证表单值。

例如:

import * as yup from 'yup';

const schema = yup.object().shape({
// your yup validation schema here
});
const MyForm = () => (
<Form schema={schema} uiSchema={uiSchema} validate={validate} />
);