如何修复底栏位置 - 反应导航？答案

【问题标题】：How can i fix bottom bar position - react navigation?如何修复底栏位置 - 反应导航？
【发布时间】：2020-12-27 07:20:13
【问题描述】：

我的应用中有一个底部标签栏，我想为其应用“左上/右”添加一个圆角，但我有一个问题，我在它后面得到了背景视图“白色”！要删除它，我应该使用“绝对”位置，但这会使标签栏覆盖底部的其他按钮/视图，因为它是绝对的！

那么有没有办法在不使用"position: absolute"的情况下去除底栏后面的背景

没有绝对的

正如您在顶部“左/右”角看到的那样，有一个背景

绝对的

它覆盖了按钮，“而且我不想为我拥有的每个屏幕添加底部 - 填充/边距，我也不知道应该为它们设置什么正确的值！

代码sn-p

<MainTab.Navigator
      tabBarOptions={{
        activeTintColor: Theme.PrimaryColor,
        labelStyle: {
          paddingBottom: 5,
          fontSize: 14,
        },
        style: {
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          backgroundColor: '#ff0',
          height: Platform.OS === 'ios' ? 100 : 70,
           //  position: 'absolute',
           //  bottom: 0,
           //  left: 0,
           //  right: 0,
        },
      }}>

     .....
  </MainTab.Navigator>

【问题讨论】：

标签： css reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

我认为没有绝对定位是不可能的。

至于您的问题，在栏上使用position: 'absolute' 时要添加多少边距，您为每个选项卡屏幕的父视图添加一个底部边距，该边距等于栏的高度。

如果您将所需的标签栏高度存储在某个文件中的变量中并将其导出，则可以重复使用这些样式。

import {Platform} from 'react-native';
export const tabBarHeight = Platform.OS === 'ios' ? 100 : 70,

然后标签导航器中的屏幕可能如下所示：

import {tabBarHeight} from './somePath';

const Screen = () => {
  return (
    <View
      style={{
        marginBottom: tabBarHeight,
        // Other styling...
      }}>
      <Text>Content</Text>
    </View>
  );
};

您需要对选项卡导航器中的所有屏幕重复此操作。但是，如果您以这种方式设置样式，则只需更改您声明它的 tabBarHeight 的值，就可以为所有屏幕更改它。

如果您不知道最好将这些样式放在哪里或如何构建您的样式，您可以阅读一篇不错的文章：https://thoughtbot.com/blog/structure-for-styling-in-react-native。

【讨论】：

是的，你是对的，感谢您的文章，非常棒！