当 flexDirection 设置为“行”时，Flexbox 不起作用答案

【问题标题】：Flexbox doesn't work when flexDirection is set to "row"当 flexDirection 设置为“行”时，Flexbox 不起作用
【发布时间】：2021-02-01 14:46:07
【问题描述】：

我在玩 Flexbox，但我似乎无法弄清楚为什么 FlexDirection 在设置为“行”时不起作用。

export default function WorkoutScreen() {
    return (
        <SafeAreaView style={styles.container}>
            <AppText>Heading</AppText>

            <View style={styles.sets}>


                <AppText>Reps</AppText>

                <FontAwesome name="minus-square" size={48} color="purple" />

                <AppText>9</AppText>
                <FontAwesome name="plus-square" size={48} color="pink" />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    sets: {
        flex: 1,
        **flexDirection: "row",**
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 100,
    },
});

我一直在为自己做错了什么而摸不着头脑，任何解决此问题的提示都将不胜感激！我正在 Iphone pro 12 max 上尝试 ios 模拟器。

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

好的，我终于想通了。如果您检查[文本文档][1]，它会说

元素相对于布局是唯一的：里面的一切都是不再使用 Flexbox 布局，而是使用文本布局。这表示 a 内的元素不再是矩形，而是换行当他们看到行尾时。

所以基本上我必须将文本包装在 View 标记中。 [1]：https://reactnative.dev/docs/text

【讨论】：