ReactNative 基础 - 07 （背景图ImageBackground、状态栏statusBar）

1、状态栏：statusBar

        StatusBar.currentHeight：状态栏的高度

        沉浸式：

          backgroundColor="transparent"：透明

          translucent：可穿透

2、背景图：ImageBackground

        背景图必须给宽高，背景图覆盖整个屏幕，需要动态获取屏幕大小

3、解决主体内容和状态栏重合的问题:

        写一个高度和状态栏一样高的容器，状态栏高度：StatusBar.currentHeight

        设置外边距也可以 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}}>

        {/* 沉浸式状态栏 */}
        <StatusBar backgroundColor="transparent" translucent />

        {/* 解决主体内容和状态栏重合的问题 */}
        <View style={{height: StatusBar.currentHeight}}></View>

        <Text style={{fontSize: 26, color: 'white'}}>
          这是一个背景图、沉浸式状态栏的例子
        </Text>
      </ImageBackground>
    );
  }
}