为什么 React 导航底栏会覆盖布局？答案

【问题标题】：Why does the React navigation bottom bar cover the layout?为什么 React 导航底栏会覆盖布局？
【发布时间】：2022-01-01 19:14:25
【问题描述】：

我有一个如图所示的底部栏，但该栏会阻止我的页面底部出现。如何为页面底部提供与底部栏高度一样多的空间？提前致谢。

【问题讨论】：

标签： react-native react-navigation bottomnavigationview react-navigation-bottom-tab

【解决方案1】：

这与我对 StatusBar 所做的类似。它应该非常相似。

// component which allows view to remain within the safe area of a phone based on its platform
import React from "react";
import Constants from "expo-constants";
import { SafeAreaView, StyleSheet, View } from "react-native";

function Screen({ children, style }) {
  return (
    <SafeAreaView style={[styles.screen, style]}>
      <View style={[styles.view, style]}>{children}</View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    paddingTop: Constants.statusBarHeight,
    // prevents cutoff when scrolling, grows components with the entire screen
    flex: 1,
  },

  view: {
    flex: 1,
  },
});

所以，既然你想对标签栏做同样的事情，我建议首先获取标签栏的高度（或者你放在标签栏上的额外样式）并构建一个 Screen 组件来封装所有内容你想放在屏幕上：

import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";

function Screen({ children, style }) {
  return (
    <SafeAreaView style={[styles.screen, style]}>
      <View style={[styles.view, style]}>{children}</View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    paddingBottom: <INSERT HEIGHT HERE>,
    // prevents cutoff when scrolling, grows components with the entire screen
    flex: 1,
  },

  view: {
    flex: 1,
  },
});

【讨论】：