current position:Home>Reactnative foundation - 07 (background image, status bar, statusbar)

Reactnative foundation - 07 (background image, status bar, statusbar)

2022-01-27 03:26:27 The black cat made a strange mistake

1、 status bar :statusBar

        StatusBar.currentHeight: The height of the status bar

         Immersive :

          backgroundColor="transparent": transparent

          translucent: Penetrating

2、 Background map :ImageBackground

         The background image must be wide and high , The background image covers the whole screen , You need to get the screen size dynamically

3、 Solve the problem that the main content coincides with the status bar :

         Write a container as high as the status bar , Status bar height :StatusBar.currentHeight

         You can also set the outer margin marginTop

import React, {Component} from 'react';
import {Text, View, StatusBar, ImageBackground, Dimensions} from 'react-native';

const {width, height} = Dimensions.get('screen');
export default class App extends Component {
  render() {
    return (
      <ImageBackground
        source={require('./assets/2.jpg')}
        style={
   {width, height}}>

        {/*  Immersive status bar  */}
        <StatusBar backgroundColor="transparent" translucent />

        {/*  Solve the problem that the main content coincides with the status bar  */}
        <View style={
   {height: StatusBar.currentHeight}}></View>

        <Text style={
   {fontSize: 26, color: 'white'}}>
           This is a background image 、 Example of immersive status bar 
        </Text>
      </ImageBackground>
    );
  }
}

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270326245919.html

Random recommended