使用嵌套堆栈导航器时两个 headers

Question

在我的 React 本机应用程序中，我在 StackNavigator 中使用 TabNavigator：

const AppTabs = createBottomTabNavigator(
  {
    Home: Tab1,
    Create: Tab2,
    Search: Tab3,
    Ask: Tab4
  }
);

const AppStack = createStackNavigator(
  {
    Tabs: AppTabs,
    Screen2: SecondScreen,
    Screen3: ThirdScreen,
  },
  {
    initialRouteName: "Tabs"
  }
);

这很好用，但是当我尝试为搜索选项卡使用另一个 StackNavigator 时，会显示两个 header，我发现的唯一解决方案是隐藏嵌套的 StackNavigator 的 header 和 headerMode: "none":

const SearchStack = createStackNavigator(
  {
    Search: SearchScreen,
    Post: PostScreen,
  },
  {
    headerMode: "none",
    navigationOptions: {
      headerShown: false
    },
    initialRouteName: "Search"
  }
);

但是，此功能不是我的应用程序的最佳选择。我需要在搜索选项卡处于焦点时隐藏外部 StackNavigator 的 header，这样用户仍然可以在嵌套搜索堆栈中的屏幕之间来回切换。有人可以告诉我应该怎么做才能实现这一目标吗？

Answer 1

将您的 AppStack 导航器更改为以下内容：

const AppStack = createStackNavigator(
  {
    Tabs: AppTabs,
    Screen2: SecondScreen,
    Screen3: ThirdScreen,
  },
  {
    defaultNavigationOptions: ({navigation}) => {
      const currentRoute = navigation.state.routes[navigation.state.index];
      const {routeName} = currentRoute;

      let tabBarVisible = true;

      if (routeName === 'Search') {
        tabBarVisible = false;
      }

      return {
        headerShown: tabBarVisible,
      };
    },
    initialRouteName: 'Tabs',
  },
);

如果应用正在渲染 Search 路由，最上面的 StackNavigator (AppStack) 的 headerShown 属性将被设置为 false .这意味着应用程序在呈现 Search 路由时不会显示 AppStack header。

SearchStack 导航器可以这样简单地定义：

const SearchStack = createStackNavigator(
  {
    Search: SearchScreen,
    Post: PostScreen,
  },
  {
    initialRouteName: 'Search',
  },
);

Answer 2

Simply use below code in the page you want to hide the header

export default class SearchScreen extends Component {
    static navigationOptions = {
        header: null
    }
}

Answer 3

我认为您以错误的方式使用了 react-navigation，您不应该为 SearchStack 制作单独的堆栈导航器，而应该只在 AppStack 中添加 SearchStack 的屏幕。

const AppTabs = createBottomTabNavigator(
  {
    Home: Tab1,
    Create: Tab2,
    Search: Tab3,
    Ask: Tab4
  }
);

const AppStack = createStackNavigator(
  {
    Tabs: AppTabs,
    Post: PostScreen,
    Screen2: SecondScreen,
    Screen3: ThirdScreen,
  },
  {
    initialRouteName: "Tabs"
  }
);

使用嵌套堆栈导航器时两个 headers

Two headers when using nested Stacknavigators

reactjs

react-native

react-navigation

stack-navigator