标题样式错误移动应用开发

Question

我在设计react-native移动应用程序时遇到了一些麻烦。这就是我的样式:

return (
<View style={styles.container}>
<Text style={styles.headingText}>
Penn<Text style={styles.buzzText}>Buzz</Text>
</Text>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
placeholder="Username"
placeholderTextColor="white"
onChangeText={handleUsernameChange}/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.inputText}
secureTextEntry
placeholder="Password"
placeholderTextColor="white"
onChangeText={handlePasswordChange}/>
</View>
{errorMessage != '' ? (
<Text style={styles.errorStyle}>
{errorMessage}
</Text>
) : null}
<TouchableOpacity
onPress = {handleSubmit}
style={styles.loginBtn}>
<Text style={styles.loginText}>Sign In </Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'flex-start',
},
headingText: {
fontSize: 36,
fontWeight: "bold",
marginBottom: 30,
},

buzzText: {
color: "#F8C53A",
},

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

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

loginBtn:{
width:"80%",
backgroundColor:"#fb5b5a",
borderRadius:25,
height:50,
alignItems:"center",
justifyContent:"center",
marginTop:40,
marginBottom:10
},
loginText: {
height: 25,
color: "white",
fontWeight: "bold",
fontSize: 19
},
errorStyle: {
color: "black",
fontSize: 19
}
}); 

现在，当我渲染我的应用程序时，所有的元素都被推到屏幕的顶部。此外，标题/buzztext "PennBuzz"无论如何都不要出现在屏幕上。我试过多次改变文本颜色，但它只是不渲染。对如何解决这个问题有什么想法吗?

这是当前的输出:当前渲染我不确定如何得到的元素被推下，也为标题显示。

Answer 1

能否使用ViewSafeAreaView

{/*old*/}
<View style={styles.container}>
...
</View>
{/*new*/}
<SafeAreaView style={styles.container}>
...
</SafeAreaView>

这是因为在iOS和一些Android设备上有缺口空间。另一方面，如果你打算有一个全屏，如Onboarding或类似的东西，你应该可以接受标准视图。

如果你打算使用导航，这个库有它的实现SafeAreaView要了解更多信息，请记得查看imports link

我希望这对你有帮助。