React Native，在 Android 上如何使用全屏图片

Question

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

在这里，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' />

- sheriff_paul

---

尝试设置状态栏的 translucent 属性[https://facebook.github.io/react-native/docs/statusbar#translucent]。 - Hariks

@Hariks 感谢你的提示！我已经成功用以下代码覆盖了状态栏：<StatusBar translucent backgroundColor='transparent' />。现在只剩下底部导航了。 - sheriff_paul

你可以试试 paddingBottom: 0 吗？ - hong developer

@hongdevelop 不行，它不能工作。 - sheriff_paul

安装完模块后，请尝试使用。如果问题得到解决，请填写答案。 - hong developer

Answer 1

react-native-navigation-bar-color解决了我在底部导航栏方面的问题，而<StatusBar translucent backgroundColor='transparent' />则解决了状态栏的问题。

- sheriff_paul

---

太好了！这个方法有效，但是我在顶部有汉堡菜单，这个修复方法不适用。有什么解决办法吗？ - yanky_cranky

@yanky_cranky 抱歉伙计，我有一段时间没在上面工作了。 - sheriff_paul

Answer 2

import { View, Text, ImageBackground, Dimensions } from 'react-native'

//这是在您的Android或iOS上全屏显示的图像

<ImageBackground source={require('../image/TempleSlider.png')} style={{height:Dimensions.get("window").height,alignItems:'center',justifyContent:'space-between'}} > //做一些事情...

- sandeep maurya