reactjs - Material Top Tab Navigator 与状态栏重叠。有什么办法可以解决吗？

Question

如何让 createMaterialTopTabNavigator 添加的组件移出状态栏？这是我的代码:

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

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}

class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen3!</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});

See status bar overlap这是我的第一个 React Native 项目，我可能遗漏了一些重要的东西。任何指点表示赞赏。

Answer 1

安装 Expo 常量以检索 statusBarHeight 属性。

expo install expo-constants

现在设置 Material Top Tab Navigator 的样式属性并给它 marginTop。

import Constants from 'expo-constants'
const TopTab = createMaterialTopTabNavigator();
    const RequestNavigator = () => (
  <TopTab.Navigator style={{ marginTop: Constants.statusBarHeight }}>
    <TopTab.Screen name="Account" component={Account} />
    <TopTab.Screen name="Profile" component={Profile} />
    <TopTab.Screen name="Settings" component={Settings} />
  </TopTab.Navigator>
);

如果你不使用 expo，你可以使用 https://www.npmjs.com/package/react-native-status-bar-height检索状态栏高度