React-native 应用程序标题与电话标题重叠答案

【问题标题】：React-native app header overlaps with the phone headerReact-native 应用程序标题与电话标题重叠
【发布时间】：2021-07-17 07:52:14
【问题描述】：

我正在使用 react-navigation 将自定义标题添加到我的应用程序。我面临着与左图中电话标题与应用程序标题重叠的问题相同的问题。我试图在我的屏幕周围添加 SafeAreaView。但是，它并没有解决问题。

【问题讨论】：

reactnavigation.org/docs/handling-safe-area 阅读全文
如果这是一个 expo 应用程序，请使用 reactnative.dev/docs/statusbar 并将其设置为 false 半透明。

标签： react-native react-navigation

【解决方案1】：

它有两种解决方案。你可以使用

import React from 'react'
import {View,SafeAreaView, Text} from 'react-native'

const ConvertingFileScreen = () => {
    return(
        <SafeAreaView>
            <Text>ConvertingFileScreen</Text>
        </SafeAreaView>
    )
}

export default ConvertingFileScreen;

或者只是像这样给出一个 StatusBar.height 的 marginTop。

import React from 'react'
import {View,SafeAreaView,StatusBar, Text,} from 'react-native'

const ConvertingFileScreen = () => {
    return(
        <View style={{marginTop:StatusBar.currentHeight}}>
            <Text>ConvertingFileScreen</Text>
        </View>
    )
}

export default ConvertingFileScreen;

【讨论】：

Margin top 不是一个合适的解决方案，它是硬编码，我们应该依赖像 Rn 安全区域上下文这样的库，因为它们支持许多设备并正确添加填充。

【解决方案2】：

您可以使用 SafeAreaView，也可以使用 'react-native-safe-area-context' 中的 useSafeAreaInsets 添加一些顶部空间，这将解决问题。

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

const ConvertingFileScreen = () => {
 const { top } = useSafeAreaInsets();
 return (
   <View style={{marginTop: top}}>
     <Text>HI React Native</Text>
   </View>
 )
}

Check for more details

【讨论】：