web-dev-qa-db-ja.com

すべての画面でステータスバーの重複を回避する

アプリのすべての画面をiOSとAndroidの両方のステータスバーの下に表示したいので、StatusBarコンポーネントまたはpaddingTopをすべての画面に追加する必要があります。

これをグローバルに行う方法はありますか？ ReduxアプリでStatusBarを追加するための適切な最上位コンポーネントはどこにありますか？ （例： https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample ）のどの部分？

androidiosreact-nativereduxreact-redux
10
Avery235

ステップ1：プラットフォームとステータスバーをインポートする

import { Platform, StatusBar} from 'react-native';

手順2：このスタイルを親ビューに追加する

paddingTop: Platform.OS === 'Android' ? StatusBar.currentHeight : 0

完全なコード：

import React, { Component } from 'react';
    import {
      Text, View,
      Platform, StatusBar
    } from 'react-native';

    export default class App extends Component {
      render() {
        return (
          <View style={{ paddingTop: Platform.OS === 'Android' ? StatusBar.currentHeight : 0 }}>
            <Text>This is Text</Text>
          </View>
        );
      }
    }
27
Jitendra Suthar

<NavigationContainer/>コンポーネントを使用して、すべての異なるページを保持します。これにより、すべての画面コンポーネントでStatusBarおよびパディングコードを複製する必要がなくなります。

私はここに例を作成しました： https://snack.expo.io/SyaCeMOwW

また、ナビゲーション構造やReduxフローに関して何も変更する必要はありません。

0
dotcomXY