React-native，在 android 上使用全屏图像

Question

我刚刚开始开发一个新的应用程序，并立即遇到了问题。

这里，右边的ios，背景成功覆盖了整个屏幕，包括顶部栏和底部导航。但是，在 android 上，这不会发生。

这是我的代码：

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;

有谁知道如何让android上的背景覆盖整个屏幕，就像在ios上一样？

更新：

我们已经设法使用以下代码覆盖状态栏：

<StatusBar translucent backgroundColor='transparent' />

Answer 1

react-native-navigation-bar-color用底部导航栏和<StatusBar translucent backgroundColor='transparent' />- 用状态栏解决了我的问题。