反应原生 flexbox 行和列答案

【问题标题】：react native flexbox row and cloumn反应原生 flexbox 行和列
【发布时间】：2020-10-03 11:31:16
【问题描述】：

美好的一天！我正在从事一项设计任务，以在反应式弹性概念中发展自己。我正在尝试实现以下设计

任何人都可以指导我如何获得上述输出。我有一个 container，它是“FlexDirection:Row”和 ItemID、ItemName 和 Date，位于我使用“FlexDirection:”Column 的一个容器中"。提前致谢。

【问题讨论】：

标签： reactjs react-native react-native-flexbox

【解决方案1】：

也许这对你有帮助

const App = () => (
    <View style={styles.container}>
        <View style={styles.item}>
            <Text>Item ID</Text>
            <TextInput />
        </View>
        <View style={styles.item}>
            <Text>Item Name</Text>
            <TextInput />
        </View>
        <View style={styles.item}>
            <Text>Date</Text>
            <TextInput />
        </View>
    </View>
);
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        width: '50%'
    }
});

【讨论】：

感谢您的回复。我已经尝试过了，但我使用 DropdownBox 作为项目 ID，使用 TextInput 作为项目名称，使用日期时间选择器作为 Date，当时这些行正在折叠。
您是否尝试为所有项目设置特殊高度？像这样 => item: { width: '50%, height: 200 }
该部分共有三列，第一列是我要求的上面的图片，为此我只想修复 height 和 width 。对于剩下的两列，有两个字段我不想给出大小并分成两列。