React Native Expo StackNavigator重叠通知栏 | StackNavigator重叠通知栏

本文介绍了React Native Expo StackNavigator重叠通知栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am trying to implement navigation bar for my React Native Expo app. Here is a problem:

"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，但是它不起作用.它将边距应用于视图，但未应用于导航栏.

I don't know where and how I can set up styles for this component to make it not overlap with notifications bar. I tried to set marginTop: StatusBar.currentHeight for my root View but it didn't work. It applied the margin on the View but not on the navigation bar.

我的应用程序:

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

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

首页:

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

    static navigationOptions = {
        title: 'Welcome'
    };

    // <...>
}

推荐答案

如果将整个应用程序包装在View中，且顶部留有空白，则它将起作用.

If you wrap your entire app in a View with a top margin, it will work.

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

将来，我们会将其构建到反应导航中，以便它自动为您发生.

In the future, we're going to build this into react-navigation so it happens for you automatically.

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>
    )
  }
}

这篇关于React Native Expo StackNavigator重叠通知栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！