web-dev-qa-db-ja.com

React Native ExpoStackNavigatorが通知バーと重複しています

React Native Expoアプリにナビゲーションバーを実装しようとしています。問題は次のとおりです。

enter image description here

"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'
    };

    // <...>
}
androidreactjsreact-nativeexpocreate-react-native-app
14
Andrei

アプリ全体を上マージンのViewでラップすると、機能します。

例： 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>
    )
  }
}
33
Adam Miskiewicz

この行をapp.jsonファイルに追加します

"translucent": false

"androidStatusBar"で

このような：

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

続きを読む： StatusBar Docsの設定

0
Rasool707