react native global全局属性获取不到值

Question

index.js:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';


GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest
AppRegistry.registerComponent(appName, () => App);

App.js:

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

import Nav from './src/nav'
// * 这里设置了一个全局属性
global.statusBarHeight = StatusBar.currentHeight

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <StatusBar translucent={true} backgroundColor="transparent"></StatusBar>
        <Nav></Nav>
      </View>
    );
  }
}

nav.js:

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

console.log(global.statusBarHeight) // * undefined
export default class nav extends Component {

  render() {
    return (
      <View>
        <Text> nav </Text>
      </View>
    );
  }
}

自动更新是能拿到值的，但是手动reload或者重启app，都是undefined
（环境：Android）

Answer 1

1. https://www.npmjs.com/package... 推荐看一下这个库

import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);

使用该方式。但是该方式在ios下初始值是undefined

Answer 2

需要放在类里面

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


export default class nav extends Component {
  constructor(props) {
    super(props);
    // * 在类里才能获取到
    console.log(global.statusBarHeight)
  }

  render() {
    return (
      <View>
        <Text> nav </Text>
      </View>
    );
  }
}