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

雷内·阿拉斯(Rene Alas)

我在使用Flex Box时遇到问题,正在尝试获取这种类型的Grid View:

FlexBox网格视图

我尝试了一堆没有运气的职位,我尝试的最后一个职位是:

        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
          }
    
    });

但是,它没有像我想要的那样在顶部给出我,而是像这样:

当前的Flex视图

有任何想法吗?

亲切的问候

凯坦·拉姆特克

工作应用程式: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,
  },
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native,Flex Box 有问题

来自分类Dev

Firefox中的Flex Box和响应式宽高比问题

来自分类Dev

React Native 中的 AsyncStorage 问题

来自分类Dev

React-Native 中的右下对齐(使用 Flex-box)不起作用

来自分类Dev

Tailwind Flex Box Responsive Grid with Cards 问题

来自分类Dev

React Native:FlatList keyExtractor 和 toString() 问题?

来自分类Dev

React中的LocalStorage问题

来自分类Dev

React 中的父子问题

来自分类Dev

子div在flex box属性中存在高度问题

来自分类Dev

React Native和{flex:1}

来自分类Dev

Flex 和布局 (React Native)

来自分类Dev

React Native中DatePickerIOS的prop问题

来自分类Dev

React Native中的网络连接问题

来自分类Dev

React-native 中 AsyncStorage 有问题

来自分类Dev

React Native 中的 ModalDropdown 宽度问题

来自分类Dev

React Native:更新ListView问题

来自分类Dev

React-native安装问题

来自分类Dev

Flex WebView在React Native中

来自分类Dev

React 和 Redux 架构问题

来自分类Dev

JSSIP 和 React 音频问题

来自分类Dev

CSS Flex Box布局:全角行和列

来自分类Dev

Chrome中的React DevTools问题

来自分类Dev

React中的POST请求问题

来自分类Dev

react-native-elements安装问题与react-native

来自分类Dev

Gvim重绘Virtual Box和Windows 7主机问题

来自分类Dev

CSS z-index和box-shadow裁剪问题

来自分类Dev

box-sizing:Firefox中的边框大小调整问题

来自分类Dev

DestroyJoint函数中的box2dweb问题

来自分类Dev

React Native react-addons-perf 导入问题