如何防止布局与iOS状态栏重叠

Question

我正在使用tutorial进行React Native导航。我发现所有布局都从屏幕顶部而不是状态栏下方开始加载。这会导致大多数布局与状态栏重叠。我可以通过在加载视图时向视图添加填充来解决此问题。这是实际的方法吗？我不认为手动添加填充是解决它的实际方法。有没有更优雅的方法来解决这个问题？

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> 
            )   
    }    
}

下面显示添加填充之前和之后的屏幕截图。

Answer 1

现在您可以使用React Navigation中包含的 movq counter,%rcx #counter stored how many elements in arr I have cvtsi2sd %rcx,%xmm1 cvtsi2sd %rbx,%xmm0 #in rbx sum of my arr divsd %xmm1,%xmm0 pushq %rbp movq $format2,%rdi movq %xmm0, %rsi call printf ：

SafeAreaView

Answer 2

有一种非常简单的方法可以解决这个问题。制作一个组件。

您可以创建一个StatusBar组件，并在父组件中的第一个视图包装器之后首先调用它。

以下是我使用的代码：

'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') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

执行此操作并将其导出到主要组件后，请按以下方式调用它：

import StatusBarBackground from './YourPath/StatusBarBackground'

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

Answer 3

@philipheinser解决方案确实有效。

但是，我希望React Native的StatusBar组件可以为我们处理。

不幸的是，它并没有，但我们可以通过围绕它创建我们自己的组件来轻松地抽象出来：

./ 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>
    )
}

之前：

后：

Answer 4

我尝试了一种更简单的方法。

我们可以在android上获取Status Bar的高度，并与之一起使用SafeAreaView来使代码在两个平台上均可以工作。

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

如果我们注销Platform.OS和StatusBar.currentHeight，则会得到日志，

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

打开高度：android 24和 开启高度：android 24

我们现在可以选择使用以下方式向我们的容器视图中添加边距/填充

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

App.js中的最终代码如下：

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

Answer 5

react-navigation文档为此提供了一个很好的解决方案。首先，they recommend 不不使用React Native随附的SafeAreaView，因为：

React Native导出SafeAreaView组件时，它具有一些 固有的问题，即如果包含安全区域的屏幕正在制作动画， 它会导致跳动行为。此外，该组件仅支持 iOS 10以上版本，不支持较旧的iOS版本或Android。我们 建议使用react-native-safe-area-context库进行处理 安全区域。

相反，他们建议使用react-native-safe-area-context-看起来像这样：

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context';

export default function MyScene({title = 'MyScene'}) {
    const insets = useSafeArea();

    return (
        <View style={{paddingTop: insets.top}}>
            <Text>Hi! My name is {title}.</Text>
        </View> 
    )   
}

我想指出，使用此库提供的SafeAreaView可能是一个更好的主意，因为如今的手机底部可能还具有可以与UI元素重叠的元素。这当然取决于您的应用程序。 （有关此内容的更多信息，请参阅我一开始链接到的react-navigation文档。）

Answer 6

这是适用于iOS 的一种方式：

rxjs/operators

Answer 7

您可以通过向导航栏组件添加填充或仅使用与视图树顶部的状态栏具有相同高度的视图来处理此问题，并使用像facebook应用程序这样的背景颜色。

Answer 8

只需简单的用户反应本机的Default StatusBar即可实现这种功能。

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>