android - 类型错误 :undefined is not an object(evaluating 'style.inputStyle' )

Question

我正在创建一个简单的身份验证表单。我在 TextInput 组件级别收到此错误。这与文本输入组件的样式有关。

这是代码:

const Input = ( {label, value, onChangeText} ) => {
    const {inputStyle, labelStyle, containerStyle} = styles;

    return(
        <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
                style={inputStyle}
                value ={value}
                onChangeText = {onChangeText}
            />
        </View>
    );

    const styles={
        inputStyle:{
            color: '#000',
            paddingRight: 5,
            paddingLeft: 5,
            fontSize: 18,
            lineHeight: 23,
            flex: 2
        },

        labelStyle:{
            fontSize: 18,
            paddingLeft: 5,
            flex: 1
        },

        containerStyle:{
            height: 40,
            flexDirection: 'row',
            alignItems: 'center',
            flex: 1

        }
    };

};

export {Input};

错误信息是:

Answer 1

将 styles 保留为全局变量。

const Input = ( {label, value, onChangeText} ) => {
    const {inputStyle, labelStyle, containerStyle} = styles;

    return(
        <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
                style={inputStyle}
                value ={value}
                onChangeText = {onChangeText}
            />
        </View>
    );
};

const styles={
    inputStyle:{
        color: '#000',
        paddingRight: 5,
        paddingLeft: 5,
        fontSize: 18,
        lineHeight: 23,
        flex: 2
    },

    labelStyle:{
        fontSize: 18,
        paddingLeft: 5,
        flex: 1
    },

    containerStyle:{
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1

    }
};

export {Input};