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

Question

我正在尝试删除同级导航器上的 header（见图）。

我有一个这样的 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

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

Answer 1

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

例如：

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

或

const SignInStack = createStackNavigator({
        sign: 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,
    }
  },
})

所以在 parent stackNavigator 中我删除了 header 我也可以删除 tabBar。

希望这对寻找与我相同问题的任何人有所帮助。

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

Remove back button to sibling stack in react native

javascript

react-native

react-native-ios