Question

我们在Web应用程序中使用了ReduxForm，现在我们正在尝试构建一个本机应用程序，似乎大多数人都在使用tcomb-form。

ReduxForm可用于本机开发。不确定使用tcomb-form的最大优势是什么。

我尝试使用它（尚未探索所有高级功能）一旦我们定义了模式，控件的基本渲染就会为您完成。如果你想自定义控件的显示方式，我不知道tcomb-form是否支持它。

例如：

这里是我的Component的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（）中提供的类型）。

然而如何让我说我想对每个控件使用带有标签的Icon aling我不确定是否允许这样做。

感谢任何输入。

由于 Sateesh

Answer 1

如果您想自定义整个控件，可以去工厂，我将发布一个用于数字输入的Slider示例。我没有尝试过ReduxForm，但我确实喜欢tcomb-form，而且我没有看到任何在定制方面不可行的东西。祝你好运！

nz

并像这样使用它：

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

我发布这个作为一个例子，因为我很难把我的第一家工厂放在一起。

Answer 2

如果可以的话，我会留下这个评论作为评论，但我的名声不够高。

您需要使用自定义模板覆盖表单的本地模板，该模板为每个字段添加图标和 TextInput 。
这个gist显示了如何做到这一点。

ReduxForm vs tcomb-form for Native Development

2 个答案: