Каждый проект (особенно большой) начинается с энтузиазма и радости ... затем вы подойдете к части «Создание форм» ...

Формы являются необходимой частью каждого приложения и, конечно же, жизненно важны, когда вы хотите получать данные от своего пользователя (вход / подписка, настройки и т. Д.). С точки зрения разработчика, это просто утомительное занятие, отнимающее много времени.

Существует множество библиотек, которые должны помочь вам решить эту проблему, но мне лично никогда не нравился их подход, особенно при создании приложений с нативной реакцией.

Вот почему я наконец создал свою собственную библиотеку.

React-native-form-генератор

React-native-form-generator имеет такие преимущества, как:

  • Чистый подход в стиле реагирования (будь проще, да!)
  • Автоматическая обработка onChange и событий (вам просто нужно проверять изменения в компоненте формы, а не в каждом поле.
  • Настраиваемые поля и стили без добавления странного синтаксиса (просто создайте компонент реакции)
  • Применяет по умолчанию текущий стиль ОС (прекратите работу со стилями, чтобы сделать простой вид настроек)

хорошо… так что это значит?

Это означает, что вы можете создать форму таким образом:

<Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
</Form>

… А затем вы можете добавить поля внутри формы

<Form
        ref='registrationForm'
        onFocus={this.handleFormFocus.bind(this)}
        onChange={this.handleFormChange.bind(this)}
        label="Personal Information">
        <InputField 
             ref='first_name' 
             label='First Name' 
             placeholder='First Name'/>
        
        <InputField 
             ref='last_name' 
             placeholder='Last Name'/>
</Form>

Как только ваш пользователь введет некоторые данные, onChange будет автоматически запущен и получит введенные данные.

handleFormChange(formData){
    //formData will be a json object that will contain
    // refs of every field
    //formData.first_name
    //formData.last_name
}

Что в этом крутого?

  • Фактически вы разрабатываете форму с полным контролем над типом полей, которые вы хотите использовать, и данными, возвращаемыми полями (настраиваемые поля могут содержать сложный дизайн и возвращать объекты).
  • Вы можете смешивать любой тип компонента, например ссылку на условия использования внутри формы (полный пример можно найти на странице https://github.com/MichaelCereda/react-native-form-generator)
  • Только поля с атрибутом ref будут связаны с событием onChange формы, поэтому вы можете добавить в форму все, что хотите (а также другие компоненты реакции), а те, у которых есть ref, автоматически получат реквизит с именем onChange. [см. компонент "Разделитель"]

Присоединение событий клавиатуры к вашей собственной форме реакции

Еще одна огромная проблема, с которой вы можете столкнуться с библиотеками форм, - это обработка событий клавиатуры и обеспечение реакции вашего интерфейса на это.

React-native-form-generator уже реализует все, что вам нужно для достижения этой функциональности.

import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
   this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
  <KeyboardAwareScrollView ref='scroll'>
    <Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
      ........
    </Form>
</KeyboardAwareScrollView>

KeyboardAwareScrollView - это отредактированная версия https://github.com/APSL/react-native-keyboard-aware-scroll-view

(проверьте https://github.com/facebook/react-native/issues/3195#issuecomment-146518331 для получения информации об этом расширении, все авторские права принадлежат его автору).

приходят больше новостей