css - 滚动视图中的 Flex 内容ContainerStyle React Native

Question

我有这个代码：

import React from "react";
import { StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity } from "react-native";
import EStyleSheet from 'react-native-extended-stylesheet';

EStyleSheet.build()

const Flex = () => {
  return (
     <View style={styles.mainContainer}>
      <ScrollView style={styles.container} contentContainerStyle={styles.content}>
  <View style={[styles.fieldEditContainer]}>
        <Text style={[styles.fieldName]}>
          Email
        </Text>
    <View
      style={[
        styles.textInputContainer,
      ]}>
      <TextInput
      placeholder="Email"
        style={styles.textInput}
      />
    </View>
  </View>
  </ScrollView>
  </View>
  );
};

const styles = EStyleSheet.create({
    mainContainer: {
    flex: 1,
  },
    container: {
    flex: 1,
    paddingTop: '1rem',
    backgroundColor: '#bbded6',
  },
  content: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  textInputContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
    height: '3.25rem',
  },
  textInput: {
    flex: 1,
    padding: '1rem',
    height: '3.25rem',
    borderWidth: 2,
    borderColor: '#000629',
  },
  fieldEditContainer: {
    marginTop: '0.25rem',
    marginBottom: '0.5rem',
    width: '100%',
  },
  fieldName: {
    fontWeight: 'bold',
    color: '#000629',
    fontSize: '1rem',
  },
});

export default Flex;

https://snack.expo.io/@rarabibi/supportive-soda

当我在我的博览会上尝试它时，它看起来像这样：

我不明白为什么标题和文字输入被砸成1？当我从内容中删除 flex: 1 时，它们变得正常。我很困惑为什么它与滚动视图的 contentContainerStyle 有关。基本上，我认为我在做的事情就像

父 flex：1 滚动视图 flex：1 滚动视图容器 flex：1 文本视图 flex 1 文本输入 flex 1

为什么他们会被挤成一团？（文本和文本输入）

标签： cssreact-nativeflexbox