web-dev-qa-db-fra.com

Évitez le chevauchement de la barre d'état sur tous les écrans

Je veux que tous les écrans de mon application apparaissent sous la barre d'état sur iOS et Android, donc je devrais soit ajouter un composant StatusBar ou paddingTop à tous mes écrans.

Existe-t-il un moyen de le faire à l'échelle mondiale? Où se trouve le composant de niveau supérieur approprié pour ajouter le StatusBar dans une application Redux? (par exemple, quelle partie de https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample )?

androidiosreact-nativereduxreact-redux
10
Avery235

Étape 1: importer la plate-forme et la barre d'état

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

Étape 2: ajouter ce style dans la vue parent

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

Code complet:

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

Vous pouvez créer un <NavigationContainer/> pour contenir toutes vos différentes pages, afin que vous n'ayez pas besoin de dupliquer le code StatusBar et le remplissage dans chaque composant d'écran.

J'ai créé un exemple ici: https://snack.expo.io/SyaCeMOwW

Et rien ne doit changer en termes de structure de navigation ou de flux redux.

0
dotcomXY