javascript - 如何在 React Native 中让应用的背景颜色覆盖整个屏幕(使用样式)?
问题描述
我正在通过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
},
});
解决方案
你只需要赋予风格,
<ScrollView contentContainerStyle={{flex:1}}>
你的输入高度会更大,因为你已经写了 25% 的屏幕,所以只需相应地改变它。
推荐阅读
- rest - 我怎样才能用杰克逊只返回一个内部对象的几个 Json 字段
- mysql - Mysql按客户分组并获取最后3条记录
- swift - Firebase 云消息传递无法通过 API 运行
- javascript - CORS 问题 - Angular / PHP / Apache
- mysql - 查找与按字段排序的先前记录的差异
- php - yii2 queue proc_open 将第一个参数作为字符串除外,但给出了数组
- javascript - JS 功能在同一文件夹下的所有文件中可用
- javascript - mousedown 和 touchstart 未在移动设备上注册
- push-notification - 当应用程序被杀死时,推送通知不显示消息正文。它只显示应用程序的默认图标
- android - 带有 configChanges 的 Android DayNight 主题