Question

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

因此，有一种方法可以在不使用"position: absolute"

的情况下删除底部栏后面的背景

没有绝对

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

绝对

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

代码段

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

如何确定底部栏的位置-反应导航？

1 个答案: