React Native 中的多列和多行 Flex Box 问题答案

【问题标题】：Multi Column and Rows Flex Box issue in React NativeReact Native 中的多列和多行 Flex Box 问题
【发布时间】：2021-01-07 16:35:31
【问题描述】：

我遇到了 Flex Box 问题我正在尝试获取这种类型的网格视图：

而且我尝试了很多位置都没有任何运气，我尝试的最后一个是：

        return (
        <>
            <View style={styles.container}>
            <View style={styles.column}>
            <View style={styles.row}>
            <View style={[styles.box, { backgroundColor: 'yellow' }]} />
            </View>
            </View>
                <View style={styles.column}>
                    <View style={[styles.box, { backgroundColor: 'green' }]} />
                    <View style={[styles.box, { backgroundColor: 'lightblue' }]} />
                </View>
                <View style={styles.space_between_columns} />
                <View style={styles.column}>
                    <View style={[styles.box, { backgroundColor: 'grey' }]} />
                    <View style={[styles.box, { backgroundColor: 'purple' }]} />
                </View>
            </View>
        </>
    );
};
    
   
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            flexDirection:'row',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
          },
          row: {
            flexDirection:'row',
            justifyContent:'space-between',
            alignItems:'center',
            height:200,
            width:50
          },
          column: {
            flexDirection:'column',
            justifyContent:'space-between',
            alignItems:'center',
            height:200,
            width:50
          },
          space_between_columns:{
            width:100
          },
          box: {
            height:50,
            width:50
          }
    
    });

但不是给我想要的顶部部分，而是这样：

有什么想法吗？

亲切的问候

【问题讨论】：

它真的做到了，太棒了，我保证我会的！！！

标签： css react-native flexbox

【解决方案1】：

工作应用：Expo Snack

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.text}>Header</Text>
      </View>
      <View style={{ padding: 10, flex: 1 }}>
        <View style={styles.topSection}>
          <Text style={styles.text}>Top Section</Text>
        </View>
        <View style={{ flexDirection: 'row', flex: 1 }}>
          <View style={styles.leftColumn}>
            <Text style={styles.text}>Left Column</Text>
          </View>
          <View style={styles.rightColumn}>
            <Text style={styles.text}>Right Column</Text>
          </View>
        </View>
        <View
          style={{
            height: 70,
            flexDirection: 'row',
          }}>
          <View style={styles.subLeft}>
            <Text style={styles.text}>Sub Left</Text>
          </View>
          <View style={styles.subRight}>
            <Text style={styles.text}>Sub Right</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'start',
    backgroundColor: 'black',
  },
  header: {
    height: 100,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
  },
  topSection: {
    height: 70,
    backgroundColor: 'yellow',
    justifyContent: 'center',
  },
  leftColumn: {
    flex: 1,
    backgroundColor: 'green',
    justifyContent: 'center',
  },
  rightColumn: {
    flex: 1,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
  },
  subLeft: {
    flex: 1,
    backgroundColor: 'grey',
    justifyContent: 'center',
  },
  subRight: {
    flex: 1,
    backgroundColor: 'purple',
    justifyContent: 'center',
  },
  text: {
    alignSelf: 'center',
    color: 'black',
    fontWeight: '800',
    fontSize: 20,
  },
});

【讨论】：