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

【问题标题】：React-native, use fullscreen image on androidReact-native，在 android 上使用全屏图像
【发布时间】：2019-11-02 18:23:18
【问题描述】：

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

这里，右边的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' />

【问题讨论】：

尝试设置状态栏的半透明属性[facebook.github.io/react-native/docs/statusbar#translucent]
@Hariks 感谢您的提示！我设法用以下代码覆盖状态栏：<StatusBar translucent backgroundColor='transparent' />。现在，只剩下底部导航了。
你可以试试paddinBottom : 0 吗？
@hongdevelop 不，它不工作
嗯.. 再试试这个paddinBottom : -30

标签： javascript android ios reactjs react-native

【解决方案1】：

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

【讨论】：

太棒了！这可行，但我在顶部有汉堡菜单，这不适用于此修复程序。有什么解决方法吗？
@yanky_craky 对不起，伙计，有一段时间没有工作了
为我工作，谢谢。

【解决方案2】：

这个问题的另一种解决方案

const style = StyleSheet.create({
  background: {
    width: '100%',
    height: '100%',
    flex: 1  
}
...

或者你可以在组件本身中指定flex

<ImageBackground style={{flex : 1}}>
...
</ImageBackground>

看看this video，这正是你需要的

【讨论】：

【解决方案3】：

从'react-native'导入{View,Text,ImageBackground,Dimensions}

//这是你的android或ios上的全屏图像

//做某事...

【讨论】：