我刚开始开发一个新应用程序,立即遇到了一个问题。
在这里,iOS 在右侧,背景成功覆盖整个屏幕,包括顶部状态栏和底部导航。但是,在安卓上,这种情况并不会发生。
这是我的代码:
import React from 'react';
import { ImageBackground, Text, View, SafeAreaView, StyleSheet } from 'react-native';
import Button from "./src/components/Button";
const Explore = ({}) => {
return (
<ImageBackground
style={s.background}
source={require('./src/assets/images/explore.png')}
>
<SafeAreaView style={s.safeArea}>
<View style={s.wrapper}>
<View style={s.header}>
<Text style={s.title}>Explore</Text>
<Text style={s.subTitle}>new amazing countries</Text>
</View>
<View style={s.spacer} />
<View style={s.controls}>
<Button
style={s.button}
label="Log in"
/>
</View>
</View>
</SafeAreaView>
</ImageBackground>
);
};
const s = StyleSheet.create({
background: {
width: '100%',
height: '100%',
},
safeArea: {
flex: 1,
},
wrapper: {
flex: 1,
padding: 25,
},
header: {
paddingTop: 20,
},
title: {
fontSize: 24,
fontFamily: 'RobotoSlab-Bold',
color: '#323B45',
},
subTitle: {
fontSize: 20,
fontFamily: 'RobotoSlab-Light',
color: '#323B45',
},
spacer: {
flex: 1,
},
controls: {
flexDirection: 'row'
},
button: {
flex: 1
},
gap: {
width: 25
}
});
export default Explore;
有人知道我怎么才能让安卓的背景覆盖整个屏幕,就像在iOS上一样吗?
更新:
我们已经使用以下代码成功覆盖了状态栏:
<StatusBar translucent backgroundColor='transparent' />
<StatusBar translucent backgroundColor='transparent' />
。现在只剩下底部导航了。 - sheriff_paulpaddingBottom: 0
吗? - hong developer