React Native 与 JSON 模式形式

Question

我正在尝试找到一种将JSON schema 形式实现为React Native 的方法，但我找不到好的解决方案。

我的想法是返回一个JSF（服务器端）并使用它在应用程序中创建一个form。例如，我可以随时更改表单，而无需更新应用程序。

我发现了一些有趣的东西：

• schema to Yup ;但如果我是正确的，这将专门用于表单的验证方面，而不是创建本身。
• react-jsonschema-form ;这似乎只是 React.js 和 no support 用于 react-native（尚未）。
• tcomb-form-native 和 JSF extension 可能很有趣，但维护得不是很积极。

有人有这方面的经验吗？如果有；你是怎么实现的？

更新

这个想法是使用redux-form 并从 JSF 中抽象一些值。

const Form = ({ ...props }) => {
const fields = fieldTypesFromJSF(schema);

  return (
    <Field name='name' {...fieldTypesFromJSF.name} />
  );
}

Answer 1

在服务器端你可以像这样定义 json formConfig:[{name:'username',type:'string'},{name:'family',type:'string'}] 而在 RN 方面 formik 是最好的选择，因为它有 initialValues 道具可以根据 formConfig 进行初始化

 <Formik
    initialValues={{name,family}}
     onSubmit={values => {
     this.props.handleSubmit(values);
     }}
        >
          {props => (
            <View>
              {this.props.formConfig.map(item => {
                const { name } = item;
                if (item.type === 'number') {
                  return (
                    <>
                      <View style={styles.column}>
                        <Input
                          value={props.values[name]}
                          onChangeText={props.handleChange(name)}
                        />
                        <Text>{props.values[name]}</Text>
                      </View>
                    </>
                  );
                }
              })}

              <Button onPress={props.handleSubmit} title="submit" />
            </View>
          )}
        </Formik>

Answer 2

我确实有这方面的经验。我这样做的方法是从 api 获取表单作为 json 对象，而作为表单的根对象将由一个表数组组成，每个表将由一个元素数组组成。每个元素都是描述表单字段的对象。根据类型元素，我创建了自定义组件，例如 singleLineInput、multiLineInput、checkbox、radioButton、comboBox，并将使用 switch 语句相应地呈现。我已经简化了我的答案，只是为了让您快速入门。我实际上在描述表单主题和表单版本的 json 对象中得到了很多数据。因为每次我在网络上更改表单时，它都会创建一个新版本并与移动应用程序同步，因为移动应用程序可以离线工作，因此必须在移动设备上本地保存。