React Native Expo StackNavigator 重叠通知栏

IT技术 android reactjs react-native expo create-react-native-app
2021-05-06 15:09:16

我正在尝试为我的 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({
  Home: { screen: Home }
})

家：

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

    static navigationOptions = {
        title: 'Welcome'
    };

    // <...>
}
2个回答

如果您将整个应用程序包装在View带有顶部边距的 a 中，它将起作用。

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

将来，我们会将其构建到 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>
    )
  }
}

将此行添加到app.json文件中

"translucent": false

在 "androidStatusBar"

像这样：

"androidStatusBar": {
  "barStyle": "light-content",
  "backgroundColor": "#3a81fd",
  "hidden": false,
  "translucent": false
},

阅读更多内容：配置状态栏文档

其它你可能感兴趣的问题
上一篇改进 AutoCAD 生成的 stl 文件的三角测量 下一篇CR-10 随机停顿几秒