javascript - flex:1 not filling whole screen - Stack Overflow

admin管理员组

文章数量:1406950

I'm trying to change the background color of my app, but the color doesn't fill the whole screen. When I set flex to 0, the background color only spans the needed amount, but when I set it to 1, instead of expanding the whole screen, it shrinks. What did I do wrong?

Here's the code, changing the root view flex: render() { return (

    <Text>{wele}</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"
  }
});

I'm trying to change the background color of my app, but the color doesn't fill the whole screen. When I set flex to 0, the background color only spans the needed amount, but when I set it to 1, instead of expanding the whole screen, it shrinks. What did I do wrong?

Here's the code, changing the root view flex: render() { return (

    <Text>{wele}</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"
  }
});

• javascript
• css
• react-native
• flexbox

Share Follow edited Jun 26, 2018 at 20:04 Paulie_D 116k1313 gold badges166166 silver badges184184 bronze badges asked Jun 26, 2018 at 17:05 Olli ToivanenOlli Toivanen 10311 silver badge88 bronze badges 1

• possible guidance: w3/TR/css-flexbox-1/#flex-mon – Michael Benjamin Commented Jun 26, 2018 at 17:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You need to make sure you have flex:1 all the way down the chain of views. This is because flex: 1 will make the view fill its parent

I can see that what you have copy/pasted isn't all of the code, since there is a </KeyboardAvoidingView> but no opening tag.

So, at the very least you need a <KeyboardAvoidingView style={{flex: 1}}>, but if there is something wrapping that, you should add flex:1 to that control as well.

Put whole layout in a View wrapper and give this style to this view

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

Running example: https://snack.expo.io/Hy-Gv-lGm

本文标签： javascriptflex1 not filling whole screenStack Overflow