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>
);
}
}