ReduxForm против tcomb-формы для нативной разработки

Question

Мы использовали ReduxForm в нашем веб-приложении и сейчас пытаемся создать нативное приложение, и кажется, что большинство парней используют tcomb-form.

ReduxForm можно использовать для нативной разработки. Не уверен, что является самым большим преимуществом использования tcomb-формы.

Я попытался использовать его (пока не изучал все расширенные функции), как только мы определяем схему, базовая визуализация элементов управления выполняется для вас. Однако, если вы хотите настроить отображение элемента управления, я не уверен, поддерживает ли tcomb-form его.

Пример:

Здесь, в методе render() моего компонента:

let Form= tFormNative.form.Form;

        let options= {
            fields: {
            }
        };

        let username= {
            label: I18n.t('LoginForm.username'),
            maxLength: 12,
            editable: true,

        };

        let email = {
            label: I18n.t('LoginForm.email'),
            keyboardType: 'email-address',
            editable: true,

        };

        let password = {
            label: I18n.t('LoginForm.password'),
            maxLength: 12,
            secureTextEntry: true,
            editable: true,
        };

        let registerForm = tFormNative.struct({
            username: tFormNative.String,
            email: tFormNative.String,
            password: tFormNative.String,
            passwordReEnter: tFormNative.String,
        });

  return(
     <View style={styles.container}>
            <Form 
                style={styles.textInput}
                ref='form'
                type={registerForm}
                options={options}
            />
         </View>
  );

Теперь Label и Control (на основе типа, который вы указали в struct()) созданы.

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

Цените любые входные данные.

Спасибо Сатиш

Answer 1

Если вы хотите настроить весь элемент управления, который вы можете использовать для фабрики, я опубликую пример ползунка, который я использую для ввода чисел. Я не пробовал ReduxForm, но мне очень нравится tcomb-form, и я не вижу ничего, что не могло бы быть выполнимо с точки зрения настройки. Удачи тебе!

import React from 'react';
import { View, Text, Slider } from 'react-native';
import t from 'tcomb-form-native';
import Strings from '../config/strings.js';

var Component = t.form.Component;

class TcombSlider extends Component {

    constructor(props) {
        super(props);
        var locals = super.getLocals();
    }

    getLocals() {
        var locals = super.getLocals();
        return locals;
    }

    getTemplate() {
        let self = this;
        return function (locals) {
            var sliderConfig = locals.config.slider; 
            var stylesheet = locals.stylesheet;
            var formGroupStyle = stylesheet.formGroup.normal;
            var controlLabelStyle = stylesheet.controlLabel.normal;
            var checkboxStyle = stylesheet.checkbox.normal;
            var helpBlockStyle = stylesheet.helpBlock.normal;
            var errorBlockStyle = stylesheet.errorBlock;

            if (locals.hasError) {
                formGroupStyle = stylesheet.formGroup.error;
                controlLabelStyle = stylesheet.controlLabel.error;
                checkboxStyle = stylesheet.checkbox.error;
                helpBlockStyle = stylesheet.helpBlock.error;
            }

            var label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;
            var help = locals.config.help ? <Text style={helpBlockStyle}>{locals.config.help}</Text> : null;
            var error = locals.hasError && locals.error ? <Text accessibilityLiveRegion="polite" style={[errorBlockStyle, {marginTop: 2}]}>{locals.error}</Text> : null;

            return (
                <View style={formGroupStyle}>
                  {label}
                  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', paddingRight: 15}}>
                    <Text>{locals.value}m</Text>
                  </View>  
                  <View style={{marginBottom: 5}}>
                    <Slider
                      minimumValue={sliderConfig.minimumValue}
                      maximumValue={sliderConfig.maximumValue}
                      step={sliderConfig.step}
                      value={locals.value}
                      onValueChange={(value) => self._onChange(locals, value)}/>
                  </View>
                  {help}
                  {error}
                </View>
            );
        }
    }

    _onChange(locals, val) {
        locals.onChange(val);
    }
}

export default TcombSlider

И используйте это так:

const options = {
    fields: {
        search_range: {
            config: {
            slider: {
                maximumValue: 1000,
                minimumValue: 0,
                step: 5,
                disabled: false,
            },
         },
         factory: TcombSlider,
       },
       ...
   },
}

Я публикую это как пример, потому что мне было трудно собрать свою первую фабрику.

Answer 2

Я бы оставил это как комментарий, если бы мог, но моя репутация недостаточно высока.

Вам нужно переопределить локальный шаблон формы с помощью пользовательского шаблона, который добавляет Icon и TextInput для каждого поля.
Эта суть показывает, как вы можете это сделать.