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

Question

我的应用程序中有一个底部标签栏，我想为它添加一个圆角“top - left/right”它已应用但我有一个问题我在它后面得到背景视图“白色”！要删除它，我应该使用“绝对”位置，但这会使标签栏覆盖底部的另一个 Buttons/views，因为它是绝对的`!

那么有没有办法不使用 "position: absolute"

来去除底部栏后面的背景

没有绝对

As you see in the Top "left/right" corner there's a background

绝对

It's covering the Button, "And i don't want to add a bottom - padding/margin for every screen I have, also I don't know what the correct value should I set for them!

代码片段

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

Answer 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。

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

How can i fix bottom bar position - react navigation?

css

reactjs

react-native

react-navigation

react-navigation-v5