React-native 安卓状态栏内嵌式

目录：/android/app/src/main/res/values/styles.xml

内嵌式代码:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 头部内嵌式 -->
        <item name="android:windowTranslucentStatus">true</item>
    </style>

</resources>

正常效果：

内嵌式效果需要给头部导航加上状态栏的高度，ios手机还要解决刘海屏问题。

import { NativeModules } from  'react-native';
const { StatusBarManager } = NativeModules;

// 获取状态栏高度
const statusBarHeightFNC = () => {
  if (Platform.OS === "ios") {
    StatusBarManager.getHeight(e => {
      global.gScreen.statusBarHeight = e.height;
    });
  }
  else {
    global.gScreen.statusBarHeight = StatusBar.currentHeight;
  }
};
statusBarHeightFNC();

export default global;

render() {
    return (
      <LinearGradient
        colors={this.props.default ? ['#fff','#fff'] : ['#4280FF', '#1752CE']} 
        style={{height: 44,}}
        start={{x: 0, y: 0}} end={{x: .5, y: 0}}
        style={[
          style.header,
          {paddingTop: global.gScreen.statusBarHeight ? global.gScreen.statusBarHeight + 10 : 10} // 解决刘海屏问题
        ]}
      ></LinearGradient>
    )
}