react-native - 标题从顶部切断所有屏幕

Question

最初的标题看起来不错，但是当我在应用程序中执行一个具有 4 到 5 个屏幕导航的模块并返回主页时，所有屏幕的标题都从顶部切断

标签： react-nativereact-navigation

Answer 1

用于SafeAreaView避免应用程序中的此类故障。

有关更多信息，请访问SafeAreView 文档

包裹根组件或应用程序的最上层视图SafeAreView

一个例子是

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Page content</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
});

export default App;