react-native – 使用navigationOptions在React Navigation中根

发布时间：2020-12-15 05:04:39 所属栏目：百科来源：网络整理

导读：我想根据启用的功能更改屏幕上的底部选项卡.此功能列表通过登录API调用填充. 目前我有以下内容： const TabRouteConfig = { Home: DashboardScreen,FeatureA: FeatureA,FeatureZ: FeatureZ,};const TabNavigatorConfig = { initialRouteName: 'Home',order:

我想根据启用的功能更改屏幕上的底部选项卡.此功能列表通过登录API调用填充.

目前我有以下内容：

const TabRouteConfig = {
  Home: DashboardScreen,FeatureA: FeatureA,FeatureZ: FeatureZ,};

const TabNavigatorConfig = {
  initialRouteName: 'Home',order: [
    'Home','Feature A',],tabBarPosition: 'bottom',lazy: true,};

const TabNavigator1 = createBottomTabNavigator(
  TabRouteConfig,TabNavigatorConfig,);

// Set the tab header title from selected route
// https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
TabNavigator1.navigationOptions = ({ navigation }) => {
  const { index,routes } = navigation.state;
  const { routeName } = routes[index];

  return {
    headerTitle: routeName,};
};

const TabNavigator2 = createBottomTabNavigator(
  TabRouteConfig,{
   ...TabNavigatorConfig,order: [
      'Home','Feature Z',]

);

TabNavigator2.navigationOptions = TabNavigator1.navigationOptions;

const Stack = createStackNavigator({
  Main: {
    screen: props => (props.screenProps.hasFeature ?
      <TabNavigator1 /> : <TabNavigator2 />
    )
  },})

const WrappedStack = props => (
  <View style={styles.container}>
    <Stack
      screenProps={{ hasFeature: props.hasFeature }}
    />
  </View>
);

const mapStateToProps = (state,props) => {
  return {
    ...props,hasFeature: state.hasFeature,};
};

export default connect(mapStateToProps,null)(WrappedStack);

这主要是有效的 – 它基于hasFeature在TabNavigator1和TabNavigator2之间动态切换,但它不再尊重放置在TabNavigators上的navigationOptions并且未设置headerTitle.

有一个更好的方法吗？

这是一个反模式,可以同时渲染多个导航器,因为这些导航器的导航状态将完全分开,并且您将无法导航到另一个导航器.

您可以使用tabBarComponent选项来实现您想要的效果.希望你能从下面的例子中得到这个想法：

import { createBottomTabNavigator,BottomTabBar } from 'react-navigation-tabs';

const TabNavigator = createBottomTabNavigator(
  TabRouteConfig,{
    tabBarComponent: ({ navigation,...rest }) => {
      const filteredTabNavigatorRoutes = navigation.state.routes.filter(route => isRouteAllowed(route));
      return (
        <BottomTabBar
          {...rest}
          navigation={{
            ...navigation,state: { ...navigation.state,routes: filteredTabNavigatorRoutes },}}
        />
      );
    },},);

笔记：

>您不必单独安装react-navigation-tabs.它随react-navigation 2.0.0自动安装.> isRouteAllowed是根据是否显示该路由返回true或false的函数.确保仅检查该对象中的顶级路线.> TabRouteConfig应该包含所有可能的选项卡,并且此逻辑仅在视觉上隐藏TabBar中的路径.因此,您仍然可以以编程方式导航到所有路由.因此,您可能需要在每个屏幕中使用其他逻辑来决定是否基于hasFeature渲染它们.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!