2

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

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

我尝试使用它（尚未探索所有高级功能），一旦我们定义了架构，控件的基本呈现就会为您完成。但是，如果您想自定义控件的显示方式，我不确定 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>
  );

现在创建了标签和控件（基于您在 struct() 中提供的类型）。

让我们说我想为每个控件使用带有标签的图标，我不确定这是否被允许。

感谢任何输入。

谢谢萨蒂什

4

2 回答 2

3

如果您想定制整个控件，您可以去工厂，我将发布一个用于数字输入的 Slider 示例。我没有尝试过 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,
       },
       ...
   },
}

我将其作为示例发布，因为我很难组建我的第一家工厂。

于 2017-07-24T16:47:41.403 回答
0

如果可以的话，我会将此作为评论，但我的声誉还不够高。

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

于 2017-03-30T10:15:12.300 回答