javascript - 如何在React Native中使应用程序的背景颜色覆盖整个屏幕(使用样式)？

Question

我正在通过 Snack.expo.io 在 React Native 中为我的应用程序制作一个登录屏幕，但我无法使背景颜色填满整个屏幕。我尝试将宽度和高度设置为 100%，但只有宽度有效。我还尝试使用 Flex 1(我唯一的 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
  },
}); 

Answer 1

你只需要给出风格，

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

参见live snack expo example

您的输入高度会更大，因为您已经写了屏幕的 25%，因此只需相应更改即可。