реагировать на проблему с JSX при использовании flex

Question

Я пытаюсь добавить проверку полей формы в несколько форм в собственном мобильном приложении.Я столкнулся с проблемой, когда представление, содержащее сообщение об ошибке, которое я хочу отобразить, кажется, занимает половину пространства справа от элемента управления TextInput вместо элемента управления формы, занимающего всю строку, и сообщение об ошибке, отображаемое наследующая строкаНапример, вот так выглядит мое поле формы, когда я добавляю цвет фона к ошибке. Просмотреть контейнер:

Вот код 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

В объекте стиля, который вы передаете в представление контейнера, ваш flexDirection должен иметь значение 'column'.