Reactnative React Native Expo StackNavigator 重叠通知栏

发布于07月12日

我正在try 为我的React Native Expo应用程序实现导航栏.这里有一个问题:

"dependencies": {
    "expo": "^18.0.3",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.45.1",
    "react-navigation": "^1.0.0-beta.11"
}

我不知道在哪里以及如何设置该组件的样式，使其不与通知栏重叠.我试图为我的根视图设置marginTop: StatusBar.currentHeight，但没有成功.它将边距应用于视图，但不应用于导航栏.

我的应用程序:

import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';

export default App = StackNavigator({
  主页: { screen: Home }
})

主页:

export default class Home extends Component {
    constructor() {
        super();  
        // <...>
    }

    static navigationOptions = {
        title: 'Welcome'
    };

    // <...>
}

推荐答案

如果你把你的整个应用程序包装在一个View的顶部空白处，它就会工作.

示例:https://snack.expo.io/r1gb9TGH-

在future ，我们将把它构建到react-navigation 中，这样它就会自动为您实现.

import React, {Component} from 'react';
import {StatusBar, View} from 'react-native'
import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';

const RootNavigator = StackNavigator({
  Home: { screen: Home }
})

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
        <RootNavigator />
      </View>
    )
  }
}