css - 使用 flex 时 react native JSX 样式问题

Question

我正在尝试将表单字段验证添加到 react native 移动应用程序上的多个表单。我遇到了一个问题，其中包含我要显示的错误消息的 View 似乎占据了 TextInput 控件右侧的一半空间，而不是表单控件占据了整行并且错误消息出现在下一行。例如，当我将背景颜色添加到错误 View 容器时，我的表单字段看起来是这样的:

这是它的CSS代码:

import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';

const INPUT_HEIGHT = 36;
const BORDER_RADIUS = 4;

export default EStyleSheet.create({
    $buttonBackgroundColorBase: '$white',
    $buttonBackgroundColorModifier: 0.1,
    container: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: '$white',
        height: INPUT_HEIGHT,
        borderRadius: BORDER_RADIUS,
        marginVertical: 11,
        borderWidth: 1,
        borderColor: 'gray'
    },
    containerDisabled: {
        backgroundColor: '$lightGray',
    },
    buttonContainer: {
        flex: 1,
        height: INPUT_HEIGHT,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '$white',
        borderTopLeftRadius: BORDER_RADIUS,
        borderBottomLeftRadius: BORDER_RADIUS,
    },
    buttonText: {
        fontWeight: '600',
        fontSize: 20,
        paddingHorizontal: 16,
        color: '$primaryBlue',
    },
    separator: {
        height: INPUT_HEIGHT,
        width: StyleSheet.hairlineWidth,
        backgroundColor: '$border',
    },
    input: {
        height: INPUT_HEIGHT,
        flex: 1,
        //width: '100%',
        borderTopRightRadius: BORDER_RADIUS,
        paddingHorizontal: 8,
        backgroundColor: '$white',
        marginBottom: 0,
        paddingBottom: 0,
        marginTop: 0,
        paddingTop: 0
    },
    icon: {
        flex: 1,
        alignSelf: 'flex-start'
    },
    errorContainer: {
        height: INPUT_HEIGHT,
        flex: 1,
        paddingHorizontal: 8,
        backgroundColor: 'transparent'
    }
});

JSX 代码:

<View style={containerStyles}>
            <View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch'}}><TextInput style={textStyles} underlineColorAndroid="transparent" {...props} /></View>
            <View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch', backgroundColor: '#ff0099'}}>{ error }</View>
        </View>

生成错误信息的代码:

let error = props.error ? <Text style={{color: '#ff0000'}}>{props.error}</Text> : null;

当 onBlur 事件触发时，它一直在粉红色区域添加错误消息，而不是文本字段占据整行并且粉红色区域显示在文本字段下方？我为所有容器和文本框设置 flex=1。我想允许多种不同的屏幕分辨率。请解释我做错了什么，我可以解决这个问题吗？

Answer 1

在您传递给容器 View 的样式对象中，您的 flexDirection 应该是“column”。