ReduxFormとネイティブ開発用のtcomb-form

Question

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> 
); 

今すぐラベルとコントロール（あなたが構造体で提供型に基づいては、（））が作成されます。

どのように私はアイコンが各コントロールのラベルと一緒に使用されたいと言いますが、それが許可されているかわかりません。

任意の入力を理解してください。

おかげ Sateesh

Answer 1

私ができる場合、私はコメントとしてこれを残すだろうが、私の評判は十分に高くありません。

あなたは、各フィールドのアイコンとのTextInputを追加するカスタムテンプレートを使用して、フォームのローカルテンプレートをオーバーライドする必要があります。
このgistは、これを行う方法を示しています。

Answer 2

工場向けのコントロール全体をカスタマイズしたい場合は、数値入力に使用する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, 
     }, 
     ... 
    }, 
} 

。