使用 flex 时反应原生 JSX 样式问题答案

【问题标题】：react native JSX styling issue when using flex使用 flex 时反应原生 JSX 样式问题
【发布时间】：2018-05-10 21:47:12
【问题描述】：

我正在尝试将表单字段验证添加到 react 本机移动应用程序上的多个表单。我遇到了一个问题，其中包含我想要显示的错误消息的视图似乎占据了 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。我想允许多种不同的屏幕分辨率。请解释我做错了什么，我可以解决这个问题吗？

【问题讨论】：

标签： css react-native mobile

【解决方案1】：

在您传递到容器视图的样式对象中，您的 flexDirection 应该是“列”。

【讨论】：

我也试过了，并且在没有显示文本输入的情况下显示了视图边框。它看起来像屏幕上的两条线。
换句话说，容器似乎要塌了。
此外，这导致了许多其他导致所需行为的结构。