react native开发Android 篇——设置透明标题栏、沉浸式（透明）状态栏

第一步：状态栏设置为透明

1. StatusBar控制应用状态栏的组件，官网地址：https://reactnative.cn/docs/statusbar/，将的translucent设置为true，backgroundColor设置为transparent；

   <StatusBar
     translucent={true}
     backgroundColor="transparent"
     barStyle="light-content"
   />
   

   注：这种设置方式在启动页启动时状态栏还是存在的，而且有的手机在第二次进入APP之后状态栏还是存在！！！！

   注：在render中设置状态栏的颜色会有延迟，所以尽可能的在页面跳转之前使用StatusBar.setBarStyle('light-content')设置状态栏的字体颜色

2. 设置状态栏透明的最好方案是：找到android\app\src\main\res\values\styles.xml添加一下代码

   <resources>
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <!-- Customize your theme here. -->
           <!--设置状态栏透明开始-->
           <item name="android:windowTranslucentStatus">true</item>
           <!--设置状态栏透明结束-->
       </style>
   </resources>
   

第二步：设置createBottomTabNavigator属性navigationOptions的headerTransparent为true

const TabNavigator = createBottomTabNavigator(
    {
        Days: createStackNavigator(
            {
                Days: {
                    screen: Days,
                    navigationOptions:({ navigation, screenProps }) =>  {
                        return {
                            title: '倒数日',
                            headerStyle: {
                                backgroundColor: 'rgba(255,255,255,0.5)',
                                height: screenProps.height,//APP.js传入的值
                                paddingTop: screenProps.paddingTop//APP.js传入的值
                            },
                            headerTintColor: '#666',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: true,
                        }
                    }
                },
            }
        ),
        History: createStackNavigator(
            {
                History: {
                    screen: History,
                    navigationOptions:({ navigation, screenProps }) =>   {
                        return{
                            title: '历史上的今天',
                            headerStyle: {
                                backgroundColor: 'rgba(255,255,255,0.5)',
                                height: screenProps.height,
                                paddingTop: screenProps.paddingTop
                            },
                            headerTintColor: '#666',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: true
                        }
                    }
                }
            }
        ),
        Setting: createStackNavigator(
            {
                Setting: {
                    screen: Setting,
                    navigationOptions:({ navigation, screenProps }) =>   {
                        return{
                            title: '设置',
                            headerStyle: {
                                backgroundColor: screenProps.themeColor,
                                height: screenProps.height,
                                paddingTop: screenProps.paddingTop
                            },
                            headerTintColor: '#ffffff',
                            headerTitleStyle: {
                                fontWeight: 'bold',
                            },
                            headerTransparent: false
                        }
                    }
                }
            }
        )
    },
    {
        defaultNavigationOptions: ({ navigation }) => (
            {
                tabBarIcon: ({ focused, tintColor }) =>
                    getTabBarIcon(navigation, focused, tintColor),
            }
        ),
        tabBarOptions: {
            activeTintColor: '#666666',
            inactiveTintColor: '#999999',
            style: {
                backgroundColor:'rgba(0,0,0,0)',
            },
        },
    }
);
//创建全局导航器createStackNavigator
 const StackNavigator = createStackNavigator(
    {
        bottomTabNavigator: {
            screen: TabNavigator,
            navigationOptions: {
                header: null,
            }
        },
        AddDay: {
            screen: AddDay,
        },
        PastDayDetail: {
            screen: PastDayDetail,
        },
        BackGround: {
            screen: BackGround,
        },
    },
    {
        initialRouteName: "bottomTabNavigator",
        defaultNavigationOptions:({ navigation, screenProps }) => {
            return{
                headerStyle: {
                    backgroundColor: screenProps.themeColor,
                    height: screenProps.height,
                    paddingTop: screenProps.paddingTop
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            }
        }
    }
)
// 带有侧滑页的
export const DrawerNavigator = createDrawerNavigator(
    {
        StackNavigator: { 
            screen: StackNavigator
        },
    },
    {
        //drawerWidth: Screen.width * 0.9, // 展示的宽度
        drawerPosition: 'left', // 抽屉在左边还是右边
        contentComponent: Menu, // 自定义侧滑栏
        // swipeEnabled: false
    },
    
);

获取状态栏的高度：(文件路径是src下的deviceInfo.js)

import React, { Component } from 'react';
import { StatusBar,Platform,Dimensions} from "react-native";
//判断手机设备
// iPhone X、iPhone XS
const X_WIDTH = 375;
const X_HEIGHT = 812;

// iPhone XR、iPhone XS Max
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const DEVICE_SIZE = Dimensions.get('window');
const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;

export const isiOS = () => Platform.OS === 'ios'

export const isiPhoneX = () => {
  return (
    isiOS() &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
  );
};

//获取状态栏的高度
export const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight;

APP.js代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { View, StatusBar, Dimensions, Platform } from "react-native";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import SplashScreen from 'react-native-splash-screen';
import AsyncStorage from '@react-native-community/async-storage';
//redux 
import { Provider } from 'react-redux';
import configureStore from './src/redux/store/store.js';
//引入路由文件
import { DrawerNavigator } from './src/route.js';

import { STATUS_BAR_HEIGHT } from './src/deviceInfo.js';
import {theme} from './src/theme.js';
const height = STATUS_BAR_HEIGHT + 44;
const paddingTop = STATUS_BAR_HEIGHT;
const AppContainer = createAppContainer(DrawerNavigator);
const store = configureStore();//创建store

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  
  componentDidMount() {
    // 组件加载完毕之后，隐藏启动页
      this.timer = setTimeout(() => {
        SplashScreen.hide();
      }, 900)
  }
  //卸载计时器
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);//同时为真的才执行卸载
  }
  /*
  
  */
  render() {
    return (
      <Provider store={store}>
        <AppContainer  screenProps={{height:height,paddingTop:paddingTop,themeColor:theme.themeColor}}/>
      </Provider>
    )
  }
}