TabNavigator / redux с динамическими настройками маршрута

Question

Я занимаюсь разработкой собственного приложения с нижним таб-навигатором и хотел бы, чтобы параметры навигации зависели от отображаемого экрана, например:

AppNavigator.js:

class AppNavigator extends React.Component{
    isRouteEnabled = (routeName) => {
        return this.props.route == routeName;
    }

    render() {
        const tabNavigator = createBottomTabNavigator({
            Home: HomeScreen,
            Screen2: Screen2,
            // tab to be conditionally displayed
            ...(this.isRouteEnabled('Screen3') ? { Screen3 : Screen3} : {})
        });

        const AppNavigator = createAppContainer(tabNavigator);
        return <AppNavigator />
    }
}

У меня проблема с доступом к this.props внутри этого класса, в настоящее время он всегда не определен.Если возможно, я бы хотел, чтобы он использовал значения из моего магазина приставок, однако, если я оберну AppNavigator в вызов connect () , что сделает его компонентной навигацией более высокого уровня, больше не будет работать (по причинам, которые я не использую).не понимаю):

const mapStateToProps = (state) => ({ route: state.route })
export default connect(mapStateToProps)(AppNavigator);

App.js прост:

export default class App extends React.Component {
    render() {
        return (
            <Provider store={appStore}>
                <AppNavigator />
            </Provider>
        );
    }
}

Я что-то упустил - возможно ли иметь навигатор с динамическим поведениемчто зависит от значений, хранящихся в приставке?

Answer 1

Текущая версия React Navigation имеет API статической конфигурации, что означает, что все настройки должны выполняться вне рендера.Это делает невозможным использование вариантов, таких как динамические навигаторы, до React Navigation 4.

React Navigation 5 имеет новый API-интерфейс на основе компонентов для настройки навигаторов, который делает возможными динамические навигаторы:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  const isRouteEnabled = (routeName) => {
    return this.props.route == routeName;
  }

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Screen2" component={Screen2} />
      {isRouteEnabled('Screen3') && (
        <Tab.Screen name="Screen3" component={Screen3} />
      )}
    </Tab.Navigator>
  );
}

const mapStateToProps = (state) => ({ route: state.route });

export default connect(mapStateToProps)(AppNavigator);

Документация: https://reactnavigation.org/next

Имейте в виду, что React Navigation 5 все еще находится в альфа-режиме.