如何在 React Native 中让应用的背景颜色覆盖整个屏幕（使用样式）？答案

【问题标题】：How to make the background color of an app cover the entire screen (using style) in React Native?如何在 React Native 中让应用的背景颜色覆盖整个屏幕（使用样式）？
【发布时间】：2020-01-08 04:36:05
【问题描述】：

我正在通过snack.expo.io 在React Native 中为我的应用程序制作登录屏幕，但我无法让背景颜色填满整个屏幕。我试图将宽度和高度设为 100%，但只有宽度有效。我还尝试使用 1 的 flex（我唯一的 flex 项），但这也不起作用。我正在关注本教程：https://reactnativemaster.com/react-native-login-screen-tutorial。但是更改了一些小方面，但无论哪种方式，我都无法让背景覆盖整个屏幕。

这是我的代码（全部在 app.js 中）

import * as React from 'react';
import { Text, TextInput, View, ScrollView, SecureTextEntry, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  state={
    username:"",
    password:""
  }

  render(){
    return (
      <ScrollView>

        <View style={styles.container}>
          <View style={styles.inputView} >
            <TextInput  
              style={styles.inputText}
              placeholder="Username" 
              placeholderTextColor="#003f5c"
              onChangeText={text => this.setState({username:text})}/>
          </View>

          <View style={styles.inputView} >
            <TextInput  
            style={styles.inputText}
            placeholder="Password" 
            placeholderTextColor="#003f5c"
            secureTextEntry={true}
            onChangeText={text => this.setState({password:text})}/>
          </View>

          <TouchableOpacity style={styles.loginBtn}>
            <Text style={styles.loginText}>LOG IN</Text>
          </TouchableOpacity>

        </View>



      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    //flex: 1,
    width:"100%",
    height:"100%",
    backgroundColor: '#003f5c',
    alignItems: 'center',
    justifyContent: 'center',
  },

  logo:{
    fontWeight: "bold",
    fontSize: 50,
    color: "#fb5b5a",
    marginBottom: 40
  },

  inputView:{
    width:"80%",
    backgroundColor:"#465881",
    borderRadius:25,
    height:"25%", // 50pixel
    //marginTop:20,
    marginBottom:20,
    justifyContent:"center",
    padding:20
  },

  inputText:{
    height:50,
    color:"white"
  },

  loginBtn:{
    width:"60%",
    backgroundColor:"#fb5b5a",
    borderRadius:25,
    height:"25%", // shoyld be 50 pixl
    alignItems:"center",
    justifyContent:"center",
    marginTop:20,
    marginBottom:10
  },
});

【问题讨论】：

只是为了帮助调试，你能附上你的输出截图吗？

标签： javascript android reactjs react-native

【解决方案1】：

你只需要给出风格，

<ScrollView contentContainerStyle={{flex:1}}>

见live snack expo example

你的输入高度会更大，因为你已经写了 25% 的屏幕，所以只需相应地改变它。

【讨论】：