Блог

Главная - Вопросы по программированию - Заголовок собственного приложения React перекрывается с заголовком телефона

Заголовок собственного приложения React перекрывается с заголовком телефона

#react-native #react-navigation

Вопрос:

Я использую навигацию react, чтобы добавить пользовательский заголовок в свое приложение. Я сталкиваюсь с той же проблемой, которая показана на левом изображении, где заголовок телефона перекрывается с заголовком приложения. Я попытался добавить защитный экран вокруг своего экрана. Но это не помогло решить проблему.

введите описание изображения здесь

Комментарии:

1. reactnavigation.org/docs/handling-safe-area прочитайте полный документ

2. Если это приложение expo, используйте reactnative.dev/docs/панель состояния и сделайте ее прозрачной как false.

Ответ №1:

он имеет два решения. Вы можете использовать

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

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

export default ConvertingFileScreen;

или просто с указанием верхней границы строки состояния.высота, как это.

 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;

Комментарии:

1. Верхнее поле не является правильным решением, это сложное кодирование, вместо этого мы должны полагаться на библиотеки, такие как контекст безопасной области Rn, потому что они поддерживают многие устройства и правильно добавляют заполнение.

Ответ №2:

Вы можете использовать SafeAreaView или добавить несколько верхних пробелов, используя наборы параметров usesafeareains из «react-native-safe-area-контекст», это решит проблему.

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

Проверьте для получения более подробной информации

Метки: