嵌套 TabNavigator 中的自定义标题

Question

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

我有一个底部标签栏，对于每个标签，我都会有一个顶部标签栏，用于显示其他相关视图。

我正在工作，但是在嵌套的“全部”选项卡中的视频选项卡上，我需要在标题中添加一个搜索栏，在“收藏夹”选项卡上，我将拥有另一个自定义标题右上角的“编辑”按钮。

如何在允许 React Navigation 协调一切的同时实现这种导航。见下图：

我不想做的是在 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;

小吃

https://snack.expo.io/H1qeJrLiM

图片

Answer 1

您可以使用 react-navigation addListener 函数与 setParams 组合来实现所需的行为。

您可以监听焦点和模糊事件，然后更改参数。然后在您的路由配置中，您可以查找此参数并决定要为标题渲染什么。我changed your snack 展示了我所建议的工作示例。

示例

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"
  }
);

---

export default class Videos extends Component {
  constructor(props) {
    super(props);
    this.willFocusSubscription = props.navigation.addListener(
      'willFocus',
      payload => {
        this.props.navigation.setParams({title: 'All Videos'});
      }
    );
    this.willBlurSubscription = props.navigation.addListener(
      'willBlur',
      payload => {
        this.props.navigation.setParams({title: 'Just Videos'});
      }
    );
  }
  componentWillUnmount() {
     this.willFocusSubscription.remove();
     this.willBlurSubscription.remove();
  }
  render() {
    return (
      <View>
        <Text> Videos </Text>
      </View>
    );
  }
}