javascript - React-native, use fullscreen image on android - Stack Overflow

admin管理员组

文章数量:1335127

I just have started developing a new app and immediately ran into a problem.

Here, ios on the right, the background successfully covers the entire screen, including the top bar and the bottom navigation. However, on android, this does not happen.

Here is my code:

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;

Does anyone know how I can make the background on android cover the entire screen, jus like on ios?

UPDATE:

We have managed to cover the status bar with the following code:

<StatusBar translucent backgroundColor='transparent' />

I just have started developing a new app and immediately ran into a problem.

Here, ios on the right, the background successfully covers the entire screen, including the top bar and the bottom navigation. However, on android, this does not happen.

Here is my code:

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;

Does anyone know how I can make the background on android cover the entire screen, jus like on ios?

UPDATE:

We have managed to cover the status bar with the following code:

<StatusBar translucent backgroundColor='transparent' />

• javascript
• android
• ios
• reactjs
• react-native

Share Improve this question Follow edited Nov 2, 2019 at 18:43 sheriff_paul asked Nov 2, 2019 at 18:23 sheriff_paulsheriff_paul 1,06533 gold badges1515 silver badges3131 bronze badges 9

• 1 Try setting translucent prop of Statusbar[facebook.github.io/react-native/docs/statusbar#translucent] – Hariks Commented Nov 2, 2019 at 18:32
• 1 @Hariks Thanks for the tip! I have managed to cover the status bar with the following code : <StatusBar translucent backgroundColor='transparent' />. Now, only the bottom navigation left. – sheriff_paul Commented Nov 2, 2019 at 18:41
• Could you try paddinBottom : 0 ? – hong developer Commented Nov 2, 2019 at 18:51
• @hongdevelop nope, it is not working – sheriff_paul Commented Nov 2, 2019 at 19:09
• um.. just one more try this paddinBottom : -30 – hong developer Commented Nov 2, 2019 at 19:10

 |  Show 4 more comments

2 Answers 2

Sorted by: Reset to default 14

react-native-navigation-bar-color has solved my issue with the bottom navigation bar, and <StatusBar translucent backgroundColor='transparent' /> - with the status bar.

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

//This is Image full screen on your android or ios

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

本文标签： javascriptreactnativeuse fullscreen image on androidStack Overflow