Question

我正在尝试删除同级导航器上的标题（参见图片）。

我有一个像这样的stackNavigator：

const navigator = createStackNavigator({
  'route': RouteComponent,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

sibling1Navigator看起来像这样：

    const Sibling1Navigator = createStackNavigator(
  {
    'route1': Route1Component,
    'route1': Route2Component,
    'route3': Route3Component,
  },
  {
    transitionConfig: HorizontalSlideTransitionConfig,
    navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
      return {
        headerTransparent: true,
        headerStyle: {
          backgroundColor: '#FFF0',
        },
        headerLeft: (
          // tslint:disable-next-line
          <Button />
        ),
      }
    },
  },
)

我在route上使用标题来显示标题，但是在路线route1或route2上我不希望返回页面（如图像）。

我正在使用react-navigation: ^2.17.0

我已经看到了许多有关如何执行此操作的示例。最简单的方法是将配置添加到每个页面。我已经看过关于这个问题similar question的所有答案，但是我希望我可以用stackNavigators做些什么。还有另一种方法吗？还是必须在组件内部完成？

Answer 1

您可以通过在React Navigation中将标题样式的高度和宽度设置为零来隐藏标题，

例如：

curl

或

const SignInStack = createStackNavigator({
    sign: { screen: SignIn, 
        navigationOptions: {
            headerStyle: {
                height: 0,
                width: 0,
            },
        },
       },
});

Answer 2

我通过遵循A tab navigator contains a stack and you want to hide the tab bar on specific screens上的文档来解决了这个问题

我按照文档所述将导航器拆分为推荐的方法。

这是我的新代码，以举例说明我所做的事情。

    const navigator = createStackNavigator({
  'route': RouteComponent,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

const ParentNavigator = createStackNavigator({
  'Another route': AnotherNavigator,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
}, {
  headerMode: 'none',
  navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
    return {
      tabBarVisible: false,
    }
  },
})

因此，在父stackNavigator中，我删除了标题，也可以删除tabBar。

希望这可以帮助任何寻求与我相同的问题的人。

在React Native中删除返回按钮到同级堆栈

2 个答案: