「React Native」沉浸式状态栏安卓无法透明问题

一、采用React Native提供的StatusBar

 <StatusBar
      barStyle={'dark-content'}
      translucent={true}
      hidden={false}
      backgroundColor="rgba(0, 0, 0, 0)"
/>

        android activity的主题,设置全屏。配置之后,正常首次进入或者杀掉进程进入都没问题,但是安卓物理返回键,返回到桌面之后,重新点击进入,此时状态栏会被隐藏。

二、解决方案:

        在app.js/app.tsx文件中,新增监听前后台切换。在可见时,重新设置状态栏。

    import React, { Component } from 'react';
    import { View, StatusBar,AppState } from 'react-native';

    componentDidMount() {
        AppState.addEventListener('change', this.dealAppState)
    }

    componentWillUnmount(){
        AppState.removeEventListener('change', this.dealAppState)
    }

    dealAppState = (nextAppState) => {
        if (nextAppState === 'active') {
            StatusBar.setTranslucent(true)
            StatusBar.setHidden(false)
            StatusBar.setBackgroundColor("rgba(0,0,0,0)")
        }
    }
   render() {
        return (
            <View style={{ flex: 1 }}>
               <StatusBar
                    barStyle={'dark-content'}
                    translucent={true}
                    hidden={false}
                    backgroundColor="rgba(0, 0, 0, 0)"
                />}
               <AppNavigation />
            </View>
        );
    }

推荐阅读更多精彩内容