弹性方向行在 React Native 中不起作用答案

【问题标题】：flex-direction row not working in React Native弹性方向行在 React Native 中不起作用
【发布时间】：2023-01-09 22:57:49
【问题描述】：

我正在尝试为作业创建 Andy Warhol 样式图像。行容器不是连续渲染图像，目标是将 2 行容器堆叠成正方形。

到目前为止，这是我的代码：

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.rowContainer}>
                    <View style = {styles('blue').img}>
                        <View style = {styles('red').subImg}>
                        </View>
                    </View>
                     <View style = {styles('black').img}>
                        <View style = {styles('green').subImg}>
                        </View>
                    </View>
                </View>
                <View style = {styles.rowContainer}>
                     <View style = {styles('purple').img}>
                        <View style = {styles('yellow').subImg}>
                        </View>
                    </View>
                     <View style = {styles('orange').img}>
                        <View style = {styles('#11E1E4').subImg}>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = (inputColor) => StyleSheet.create({
    container: {
      flex : 1,
      flexDirection: "row",
    },
    rowContainer:{
        height: 100,
        width: 200,
        flexDirection: "row",
        
    },
    img: {
        height : 100,
        width: 100,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor : inputColor,
        
    },
    subImg: {
        height: 50,
        width: 50,
        backgroundColor : inputColor,
    },
 
});

我摆弄过行容器的嵌套和大小。我的老师给我的示例代码按预期工作。我不知道出了什么问题。顺便说一句，真的是编码新手，所以请把任何答案都弄糊涂

示例代码：

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                </View>
                <View style={styles.middleBox}>
                </View>
                <View style={styles.bottomBox}>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    topBox: {
        width: 75,
        height: 75,
        backgroundColor: 'lightblue',
    },
    middleBox: {
        width: 75,
        height: 75,
        backgroundColor: 'mediumblue',
    },
    bottomBox: {
        width: 75,
        height: 75,
        backgroundColor: 'darkblue',
    },
});

【问题讨论】：

标签： css react-native flexbox jsx

【解决方案1】：

你没有使用 flexbox。这是通过在容器上设置 display:flex 来完成的。因此，在容器上设置 display: "flex"。

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    ...

旁注：当设置 display: flex 时，flex-direction (flexDirection) 默认为 row。

【讨论】：