Jak zapobiec nakładaniu się układu na pasek stanu iOS

Question

Pracuję nad tutorial dla Natywnej nawigacji React. Dowiedziałem się, że cały układ zaczyna się ładowanie od góry ekranu zamiast poniżej paska stanu. Powoduje to nakładanie się większości układów na pasek stanu. Mogę to naprawić, dodając dopełnienie widoku podczas ładowania. Czy to jest właściwy sposób na zrobienie tego? Nie sądzę, że ręczne dodanie dopełnienia jest właściwym sposobem rozwiązania tego problemu. Czy istnieje bardziej elegancki sposób na rozwiązanie tego problemu?

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

export default class MyScene extends Component { 
    static get defaultProps() { 
      return { 
        title : 'MyScene'  
      }; 
    } 
    render() { 
      return (
        <View style={{padding: 20}}> //padding to prevent overlap 
          <Text>Hi! My name is {this.props.title}.</Text> 
        </View> 
      ) 
    }  
} 

Poniżej przedstawiono zrzuty ekranu przed dodaniem i po dopełnieniu.

Answer 1

Istnieje prosty sposób, aby to naprawić. Utwórz komponent.

Można utworzyć komponent StatusBar i wywołać go najpierw po pierwszym opakowaniu widoku w komponentach macierzystych.

Oto kod na jednej używać:

'use strict' 
import React, {Component} from 'react'; 
import {View, Text, StyleSheet, Platform} from 'react-native'; 

class StatusBarBackground extends Component{ 
    render(){ 
    return(
     <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    statusBarBackground: { 
    height: (Platform.OS === 'ios') ? 20 : 0, //this is just to test if the platform is iOS to give it a height of 20, else, no height (Android apps have their own status bar) 
    backgroundColor: "white", 
    } 

}) 

module.exports= StatusBarBackground 

Po wykonaniu tej czynności i eksportowania go do głównego składnika, nazwać tak:

import StatusBarBackground from './YourPath/StatusBarBackground' 

export default class MyScene extends Component { 
    render(){ 
    return(
     <View> 
     <StatusBarBackground style={{backgroundColor:'MidnightBlue '}}/> 
     </View> 
    ) 
    } 
} 

 

Answer 2

Można sobie z tym poradzić, dodając wyściółkę do ciebie pasku nawigacji komponentu lub tylko reklamy widok, który ma taką samą wysokosc jako pasku stanu w górnej części widoku drzewa z backgroundColor jak facebooku aplikacja to robi.

Answer 3

@ Rozwiązanie philipheinser rzeczywiście działa.

Jednakże, spodziewam się, że komponent React Native, StatusBar zajmie się tym dla nas.

, nie stanowią unfortunlty, ale możemy abstact że z dala quait easly przez intoru nasz własny komponent wysoki order

./StatusBar.js

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

// here, we add the spacing for iOS 
// and pass the rest of the props to React Native's StatusBar 

export default function (props) { 
    const height = (Platform.OS === 'ios') ? 20 : 0; 
    const { backgroundColor } = props; 

    return (
     <View style={{ height, backgroundColor }}> 
      <StatusBar { ...props } /> 
     </View> 
    ); 
} 

./index.js

import React from 'react'; 
import { View } from 'react-native'; 

import StatusBar from './StatusBar'; 

export default function App() { 
    return (
     <View> 
     <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" /> 
     { /* rest of our app */ } 
     </View> 
    ) 
} 

Przed:

Po: