Question

如何在BarcodeScanner页面上隐藏标签栏？

我当前在navigationOptions的属性内设置为false，但无法正常工作。

Colect
- BarcodeScanner
可视化

这是我当前的代码

const Routes = createAppContainer(
  createBottomTabNavigator({
    GroupColect: {
      screen: createStackNavigator({
        PageColect: {
          screen: Colect,
          navigationOptions: {
            header: null,
          },
        },
        PageBarcodeScanner: {
          screen: BarcodeScanner,
          navigationOptions: {
            tabBarVisible: false,
          },
        },
      }),
      navigationOptions: {
        tabBarLabel: 'Coleta',
        tabBarIcon: ({ tintColor }) => <Icon name="format-list-bulleted" size={20} color={tintColor} />,
      },
    },
    Visualization,
  }, {
    tabBarOptions: {
      keyboardHidesTabBar: true,
      activeTintColor: '#FFF',
      inactiveTintColor: 'rgba(255, 255, 255, 0.67)',
      style: {
        backgroundColor: '#8ac523',
      },
    },
  }),
);

Answer 1

在tabBarVisible: false中写入PageBarcodeScanner时，它适用于自动换行导航器。在您的示例中，包装导航器是一个堆栈，而不是一个标签栏，因此无效。

很显然，您可以将属性应用于选项卡栏的堆栈之一（例如GroupColect），但这将隐藏堆栈中所有屏幕的栏，这不是您想要的。

您想要的是隐藏堆栈第二个屏幕上的标签栏。实际上，官方文档涵盖了this exact use case。

让我们重构一下代码：

const GroupColectStack = createStackNavigator({
  PageColect: {
    screen: Colect,
    navigationOptions: {
      header: null,
    },
  },
  PageBarcodeScanner: {
    screen: BarcodeScanner,
    navigationOptions: {
      tabBarVisible: false,
    },
  },
});

const BottomTabs = createBottomTabNavigator({
  GroupColect: {
    screen: GroupColectStack,
    navigationOptions: {
      tabBarLabel: 'Coleta',
      tabBarIcon: ({ tintColor }) => <Icon name="format-list-bulleted" size={20} color={tintColor} />,
    },
  },
  Visualization,
}, {
  tabBarOptions: {
    keyboardHidesTabBar: true,
    activeTintColor: '#FFF',
    inactiveTintColor: 'rgba(255, 255, 255, 0.67)',
    style: {
      backgroundColor: '#8ac523',
    },
  },
});

const Routes = createAppContainer(BottomTabs);

我什么都没改变，只是分开了不同的导航器。

现在您所要做的就是添加此部分：

GroupColectStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

这会将标签栏保留在第一个屏幕上，但将其隐藏在另一个屏幕上。

Answer 2

您可以对所有堆栈使用一个StackNavigator，并将TabNavigator设置为默认路径。请重置路径。

StackNavigator
- TabNavigator
  - PageColect
  - PageBarcodeScanner

您可以通过多种方式隐藏标题。

您可以使用navigationOptions 标题 React Element或给定HeaderProps的函数将返回React Element，以显示为标题。设置为null会隐藏标题。

        PageBarcodeScanner: {
          screen: BarcodeScanner,
          navigationOptions: () => ({
             header: null,
             tabBarVisible: false,

          }),

静态导航选项

class BarcodeScanner extends React.Component {
  static navigationOptions = {
    header: null,
    tabBarVisible: false,
  };

或Stacknavigation Options

headerMode-指定标题的呈现方式：

none-将不显示标题。

const RootStack = createStackNavigator(
  {
    Your Stack Navigation
  },
  {
    initialRouteName: 'Home',
    headermode: 'none'
  }
);

tabbarvisble在底部导航器中的堆栈导航器上不起作用

2 个答案: