javascript - 在 React Native 中移除后退按钮到同级堆栈

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 上使用 header 来显示标题，但在 route1 或 route2 上我不希望返回页面 (像图片)。

我正在使用 react-navigation: ^2.17.0

我见过很多关于如何做到这一点的例子。最简单的方法是将配置添加到每个页面。我看过这个问题的所有答案similar question但我希望我可以用 stackNavigators 做点什么。是否有另一种方法可以做到这一点，还是必须在组件内部完成？

Answer 1

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

例如:

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

或

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