React native 嵌套选项卡导航器中的自定义标题

对于我正在开发的应用程序，我有一个相当复杂的导航流程要求

我有一个底部选项卡栏，对于每个选项卡，我将有一个顶部选项卡栏，用于其他相关视图

不过，在嵌套的“所有”选项卡中的“视频”选项卡上，我需要在标题中添加一个搜索栏，在“收藏夹”选项卡上，我将有另一个自定义标题，在右上角有一个“编辑”按钮

如何在允许React导航协调所有内容的同时实现此导航。见下图：

我不想做的是在MainNavigator级别禁用标头，并为特定路由启用它。甚至更糟糕的是，在单个容器上嵌入标题和选项卡栏

routes.js

import {
  StackNavigator,
  TabNavigator,
  DrawerNavigator
} from "react-navigation";
import Feed from "./containers/Feed";
import Auth from "./containers/Auth";
import News from "./containers/News";
import Videos from "./containers/Videos";
import FavouriteVideos from "./containers/FavouriteVideos";

const DashboardNavigator = TabNavigator(
  {
    Feed: {
      screen: Feed
    },
    News: {
      screen: News
    }
  },
  {
    tabBarPosition: "top"
  }
);

const VideoNavigator = TabNavigator(
  {
    Videos: {
      screen: Videos,
      navigationOptions: {
        title: "All"
      }
    },
    Favourites: {
      screen: FavouriteVideos
    }
  },
  {
    tabBarPosition: "top"
  }
);

const MainNavigator = TabNavigator(
  {
    Dashboard: {
      screen: DashboardNavigator,
      navigationOptions: ({}) => ({
        title: "Dashboard"
      })
    },
    Video: {
      screen: VideoNavigator,
      navigationOptions: ({}) => ({
        title: "Videos"
      })
    }
  },
  {
    swipeEnabled: false,
    animationEnabled: false,
    tabBarPosition: "bottom"
  }
);

const AuthenticatedNavigator = DrawerNavigator({
  App: {
    screen: MainNavigator
  }
});

const RootNavigator = StackNavigator({
  LoggedOut: {
    screen: Auth
  },
  Authenticated: {
    screen: AuthenticatedNavigator
  }
});

export default RootNavigator;

零食

图像

import {
  StackNavigator,
  TabNavigator,
  DrawerNavigator
} from "react-navigation";
import Feed from "./containers/Feed";
import Auth from "./containers/Auth";
import News from "./containers/News";
import Videos from "./containers/Videos";
import FavouriteVideos from "./containers/FavouriteVideos";

const DashboardNavigator = TabNavigator(
  {
    Feed: {
      screen: Feed
    },
    News: {
      screen: News
    }
  },
  {
    tabBarPosition: "top"
  }
);

const VideoNavigator = TabNavigator(
  {
    Videos: {
      screen: Videos,
      navigationOptions: {
        title: "All"
      }
    },
    Favourites: {
      screen: FavouriteVideos
    }
  },
  {
    tabBarPosition: "top"
  }
);

const MainNavigator = TabNavigator(
  {
    Dashboard: {
      screen: DashboardNavigator,
      navigationOptions: ({}) => ({
        title: "Dashboard"
      })
    },
    Video: {
      screen: VideoNavigator,
      navigationOptions: ({}) => ({
        title: "Videos"
      })
    }
  },
  {
    swipeEnabled: false,
    animationEnabled: false,
    tabBarPosition: "bottom"
  }
);

const AuthenticatedNavigator = DrawerNavigator({
  App: {
    screen: MainNavigator
  }
});

const RootNavigator = StackNavigator({
  LoggedOut: {
    screen: Auth
  },
  Authenticated: {
    screen: AuthenticatedNavigator
  }
});

export default RootNavigator;

---

您可以结合使用react导航功能来实现所需的行为

您可以监听焦点和模糊事件，然后更改参数。然后在路由配置中，您可以查找此参数并决定要为标头呈现的内容。我想展示一个我所建议的工作示例

示例

const MainNavigator = TabNavigator(
  {
    Dashboard: {
      screen: DashboardNavigator,
      navigationOptions: ({}) => ({
        title: "Dashboard"
      })
    },
    Video: {
      screen: VideoNavigator,
      navigationOptions: ({navigation}) => {
        let title = 'Videos';
        navigation.state.routes.forEach((route) => {
          if(route.routeName === 'Videos' && route.params) {
            title = route.params.title;
          }
        });
        // I set title here but you can set a custom Header component
        return {
          tabBarLabel: 'Video',
          title
        }
      }
    }
  },
  {
    swipeEnabled: false,
    animationEnabled: false,
    tabBarPosition: "bottom"
  }
);

---

导出默认类视频扩展组件{
建造师（道具）{
超级（道具）；
this.willFocusSubscription=props.navigation.addListener(
“willFocus”，
有效载荷=>{
this.props.navigation.setParams（{title:'All Videos'}）；
}
);
this.willBlurSubscription=props.navigation.addListener(
“willBlur”，
有效载荷=>{
this.props.navigation.setParams（{title:'Just Videos'}）；
}
);
}
组件将卸载（）{
this.willFocusSubscription.remove（）；
此.willBlurSubscription.remove（）；
}
render（）{
返回(
视频
);
}
}

Hi Benny，设置标题会传播到根堆栈导航器。提供更复杂的功能，如搜索栏（需要自定义标题组件）不会传播。我确实创建了一个特性请求：就是为了这个。显然，我必须使用

setParams