gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:44:56 25 4
gpt4 key购买 nike

我正在通过 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
},
});

最佳答案

你只需要给出风格,

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

参见live snack expo example

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

关于javascript - 如何在React Native中使应用程序的背景颜色覆盖整个屏幕(使用样式)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59639488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com