flex:1没有填满整个屏幕

Question

我试图改变应用程序的背景颜色，但是颜色没有填满整个屏幕。当我将flex设置为0时，背景颜色仅跨越所需的量，但是当我将其设置为1时，它不会扩展整个屏幕，而是缩小了。我做错了什么？

这是代码，更改根视图的flex： 渲染() { 返回 ( ) }

    <Text>{welcome}</Text>

    <TextInput
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder={email}
      autoCapitalize="none"
      style={styles.textInput}
      onChangeText={email1 => this.setState({ email1 })}
    />
    <TextInput
      underlineColorAndroid="rgba(0,0,0,0)"
      secureTextEntry
      placeholder={password}
      autoCapitalize="none"
      style={styles.textInput}
      onChangeText={password1 => this.setState({ password1 })}
      value={this.state.password1}
    />
    {this.state.errorMessage && (
      <Text style={styles.error}>{this.state.errorMessage}</Text>
    )}
    <TouchableOpacity
      onPress={this.handleSignUp}
      style={styles.buttonContainer}
    >
      <Text style={styles.buttonText}>{signup}</Text>
    </TouchableOpacity>

    <Text
      style={styles.text}
      onPress={() => this.props.navigation.navigate("LoginScreen")}
    >
      {already_have_an_account}
    </Text>
  </KeyboardAvoidingView>
);

} }

    const styles = StyleSheet.create({
    container: {
      justifyContent: "center",
      padding: 20,
      backgroundColor: "red",
      flex: 0
    },
    textInput: {
      height: 40,
      marginTop: 8,
     paddingHorizontal: 8,
      backgroundColor: "#e2e2e2"
    },
    buttonContainer: {
      backgroundColor: "#3bd774",
      padding: 15,
      marginTop: 10
    },

  buttonText: {
    textAlign: "center",
    color: "white",
    fontWeight: "bold"
  },

  logo: {
    width: 200,
    height: 200
  },

  logoContainer: {
    alignItems: "center",
    justifyContent: "center"
  },

  text: {
    marginTop: 16,
    color: "#bcbcbc",
    textAlign: "center"
  },

  error: {
    marginTop: 8,
    color: "red"
  }
});

- Olli Toivanen

---

请参考以下网站以了解 CSS 弹性盒模型的基本知识：https://www.w3.org/TR/css-flexbox-1/#flex-common - Michael Benjamin

Answer 1

你需要确保在视图层级中全部使用 flex:1。因为这会使视图填充其父容器。

我看到你复制/粘贴的不是所有的代码，因为有一个</KeyboardAvoidingView>但没有开始标签。

所以, 至少你需要一个<KeyboardAvoidingView style={{flex: 1}}>, 但如果有一些包装它的内容, 你也应该将 flex:1 添加到那个控件上。

- Ryan Knell

Answer 2

将整个布局放在一个View包装器中，并将此样式赋予该视图。

container: {
      justifyContent: "center",
      padding: 20,
      alignItems:'center',
      backgroundColor: "red",
      flex: 1
    }

运行示例：https://snack.expo.io/Hy-Gv-lGm

- Pramod