类型错误：未定义不是对象（正在评估'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};

Answer 2

我的猜测是您是否正在使用样式表

它应该是。

 const styles = StyleSheet.create({
    //styles come here
})

希望这会有所帮助