Реагировать на Native с помощью формы схемы JSON - PullRequest
Новая
       5

Реагировать на Native с помощью формы схемы JSON

0 голосов
/ 16 октября 2019

Я пытаюсь найти способ внедрить JSON schema форму в React Native, но не могу найти хорошее решение.

Моя идея состояла в том, чтобы вернуть JSF (на стороне сервера) и использовать его для создания form в приложении. Так, например, я всегда мог вносить изменения в форму без обновления приложения.

Я нашел несколько интересных элементов:

Есть ли у кого-то опыт с этим, и если да, то;как вы это реализовали?

Обновление

Идея состоит в том, чтобы использовать redux-form и абстрагировать некоторые значения из JSF. 

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

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

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

У меня действительно есть опыт с этим на самом деле. Я сделал так, чтобы получить форму из API в виде объекта json, а корневой объект, который является формой, будет состоять из массива таблиц, а каждая таблица будет состоять из массива элементов. и каждый элемент является объектом, описывающим поле формы. и в зависимости от элемента типа я создал пользовательские компоненты, такие как singleLineInput, multiLineInput, checkbox, radioButton, comboBox и отобразил бы соответственно с помощью оператора switch. Я упростил свой ответ, просто чтобы дать вам быстрый старт. На самом деле я получал много данных в объекте json, описывающих тему формы и версию формы. так как каждый раз, когда я менял форму в Интернете, она создавала новую версию и синхронизировалась с мобильным приложением, поскольку мобильное приложение работало в автономном режиме, его нужно было сохранять локально на мобильном телефоне.

0 голосов
/ 16 октября 2019

на стороне сервера вы можете определить 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>
...