Material Top Tab Navigator 与状态栏重叠。有什么办法解决吗？答案

【问题标题】：Material Top Tab Navigator overlapping with statusbar. Any way to fix it?Material Top Tab Navigator 与状态栏重叠。有什么办法解决吗？
【发布时间】：2018-09-06 05:25:38
【问题描述】：

如何让 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 原生项目，我可能遗漏了一些重要的东西。任何指针表示赞赏。

【问题讨论】：

StatusBar 有道具 hidden 如果你想删除 statusbar
@flix 我想保留状态栏
关键字headerMode react navigation

标签： reactjs react-native react-navigation

【解决方案1】：

安装 Expo 常量以检索 statusBarHeight Prop。

expo install expo-constants

现在设置 Material Top Tab Navigator 的 style 属性，并赋予它 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 来检索状态栏高度

【讨论】：

【解决方案2】：

只需用 SafeAreaView 替换您的视图，它应该会有所帮助。

import { Text, SafeAreaView } 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,
});

【讨论】：