如何在 tcomb-form-native 中使用secureTextEntry？

Question

我在 react-native Version0.55.4 中使用 tcomb-form-native 版本 0.6.15 进行表单验证。当我使用密码字段时，文本应该隐藏在点内。根据文档，我使用了secureTextEntry并将其设置为true，但它仍然像简单文本一样显示数据。我找到了一些使用 Temple 的建议，但我不知道如何使用它们。 下面是表单代码

const Form = t.form.Form;
t.form.Form.stylesheet.controlLabel.normal = {color: 'white'}
console.log(t.form.Form.options)
const User = t.struct({
    name: t.String,
    email: t.String,
    password: t.String,
});

const formStyles = {
    ...Form.stylesheet,
    formGroup: {
      normal: {
        marginBottom: 10,
        color: 'white'
      },
    },
    controlLabel: {
        normal: {
            fontSize: 12,
            marginBottom: 7,
            fontWeight: '600',
        },
        // the style applied when a validation error occours
        error: {
            color: 'red',
            fontSize: 18,
            marginBottom: 7,
            fontWeight: '600',
        },
    },
};

const options = {
    order: ['name', 'email', 'password' ],
    fields: {
        name: {
        placeholder: 'Enter Name',
        error: 'Name is empty?',
      },
      email: {
        placeholder: 'Enter Email',
        error: 'Email is empty?',
      },
      password: {
        placeholder: 'Enter Password',
        error: 'Password is empty?',
        secureTextEntry: true,
        template: (locals) => textbox(locals, )//here i can use template but don't know how 
      },
    },
    stylesheet: formStyles,
};

class SignupScreen extends Component{

    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            password: '',
            dateOfBirth: '',
        };
    }
    onSubmit(){
        const value = this._form.getValue();
        console.log('value: ', value);
    }

    render(){
        console.log(this.state.dateOfBirth)
        return(
            <ImageBackground
                source={require('../../images/splash_screen.jpg')}
                style={{flex: 1}}
            >
                <View style={styles.container}>
                    <View style={{flex:3, justifyContent: 'center', alignItems: 'center'}}>
                        <Image source={require('../../images/big_transparent_logo.png')} />
                        <Text style={styles.subtitleStyle}>Get free drink everyday</Text>
                    </View>
                    <View style={{ flex: 7, justifyContent: 'flex-start', alignSelf: 'center', alignItems: 'center', width: '80%'}}>
                        <View style={{width: '100%', paddingHorizontal: 10, paddingVertical: 10 , backgroundColor: 'rgba(0,0,0,0.6)'}}>
                            <Form ref={c => (this._form = c)} type={User} />
                            <TouchableOpacity  style={{width: '100%', marginVertical: 10}} >
                                <Label title="BIRTHDAY" />
                                <DatePicker
                                    style={{width: '100%'}}
                                    date=''
                                    mode="date"
                                    placeholder={this.state.dateOfBirth}
                                    format="DD-MM-YYYY"
                                    maxDate="2002-06-01"
                                    confirmBtnText="Confirm"
                                    cancelBtnText="Cancel"
                                    showIcon={true}
                                    androidMode='spinner'
                                    customStyles={{
                                    dateInput: {
                                        marginLeft: 0,
                                        borderWidth: 0,
                                        textAlign: 'left',
                                        color: 'white', 
                                        backgroundColor: '#f2f2f2', 
                                        paddingVertical: 0, 
                                        height: 30,
                                        color: 'black'
                                    }
                                    // ... You can check the source to find the other keys.
                                    }}
                                    onDateChange={(date) => {this.setState({dateOfBirth: date})}}
                                />
                            </TouchableOpacity >
                            <Button block bordered light  
                                style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50}}
                                onPress={this.onSubmit.bind(this)}
                            >
                                <Text style={{color: 'white'}}>Sign Up</Text>
                            </Button>
                            <Button block light 
                                style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50, backgroundColor: 'rgba(0,0,0,0)',}}
                                onPress={()=>this.props.navigation.goBack()}
                            >
                                <Text style={{color: 'white'}}>Back</Text>
                            </Button>
                        </View>
                    </View>
                </View>
                
            </ImageBackground>
        );
    }
}

export { SignupScreen };

Answer 1

您的表单未连接到选项变量。在您的表单标签中调用选项，如下所示。

<Form ref={c => (this._form = c)} 
      type={User} 
      options={options} //set form options
/>

它应该可以在没有模板的情况下工作。

password: {
      password: true,
      secureTextEntry: true}
   }