0

我在 react-native 有问题。

我的应用程序有许多屏幕和表单。我需要为这种风格创建 TextInput 组件并将程序保持在干净的代码中。

这是我的 TextInput 组件：

import React, { Component } from 'react';
import { Text, View, TextInput, StyleSheet } from 'react-native';
import FormStyles from './formStyle.css';
class CustomTextInput extends Component {
    state = {
        isFocused: false,
    };
    render() {
        const props = this.props;
        const styles = StyleSheet.create({
            label: {
                color: global.black,
                marginBottom: 3,
                fontSize: global.normalText,
                fontFamily: global.fontRegular,
            },
            textInput: {
                fontFamily: global.fontRegular,
                backgroundColor: '#fff',
                height: 50,
                padding: 10,
                borderRadius: 8,
                fontSize: global.largeText,
                borderStyle: 'solid',
                borderColor: global.Color_transparent,
                borderWidth: 1,
                lineHeight: 1
            },
            textInputOnFocus: {
                borderBottomColor: global.primaryColor,
                borderBottomWidth: 2,
            },
            textInputHasError: {
                backgroundColor: global.formBgError,
                borderColor: global.primaryColor,
            }
        });
        return (
            <View style={FormStyles.formControl}>
                {props.label ? <Text style={styles.label}>{props.label}</Text> : null}
                <TextInput
                    style={[
                        props.error && styles.textInputHasError,
                        this.state.isFocused && styles.textInputOnFocus,
                        styles.textInput
                    ]}
                    keyboardType={props.keyboardType || 'default'}
                    placeholder={props.placeholder || ''}
                    onFocus={() => this.setState({ isFocused: true })}
                    onBlur={() => this.setState({ isFocused: false })}
                    returnKeyType={props.returnKey || 'none'}
                    secureTextEntry={props.type === 'password' ? true : false}
                    autoComplete={props.autoComplete || 'off'}
                    autoFocus={props.autoFocus || false}
                    {...props}
                />
                {props.error ?
                    <Text style={FormStyles.formError}>{props.error}</Text>
                    : null}
            </View>
        )
    }
}
export default CustomTextInput

但是，在 LoginScreen 我有两个文件：电话号码和密码我需要电话号码 TextInput，有下一步按钮和设置属性：

returnKeyType="next"

在登录屏幕中，当我使用 Ref 创建 ref 密码字段时，它无法正常工作！我创建的 Ref 不是问题。因为当我删除 CustomTextInput 组件时它可以正常工作。但我需要使用表单组件。

如果您对此有所了解，请指导我。谢谢

4

0 回答 0