React-Navigation: навигация по экрану при объявлении

Question

Компонент:

import React, { Component } from "react";
import MainNavigator from "./src/navigation";
import { connect } from "react-redux";

class Application extends Component<Props> {
  _checkToken(token) {
    //TODO: Validate token!
    return true;
  }

  _isLoggedin() {
    if (this._checkToken(this.props.token)) {
      MainNavigator.navigate("Home");
    } else {
      MainNavigator.navigate("Login");
    }
  }

  componentDidMount() {
    this._isLoggedin();
  }

  componentDidUpdate() {
    this._isLoggedin();
  }

  render() {
    return MainNavigator;
  }
}

const mapStateToProps = state => {
  return { token: state.auth.token };
};

export default connect(mapStateToProps)(Application);

Навигатор:

MainNavigator = SwitchNavigator({
  intro: { screen: introScreen },
  login: { screen: loginScreen },
  Home: { screen: homeScreen }
});

Я бы хотел, чтобы этот компонент (приложение) отвечал за перемещение представления на правильный экран в зависимости от состояния аутентификации, котороеизвлекается из redux / redux-persist.Я реализовал этот подход, потому что хотел бы, чтобы пользователь мог закрыть приложение без необходимости повторного входа в систему.Следовательно, при срабатывании componentDidUpdate или componentDidMount я проверяю действительность сохраненного токена и пытаюсь ориентироваться на основе этого.

Моя проблема в том, как мне перемещаться по экранам MainNavigator ?Документация касалась навигации с помощью this.props.navigation.navigate([ScreenName]) , но я не могу использовать этот метод здесь.

Answer 1

Вы можете создать NavigationService, как описано в официальной документации

Просто создайте новый файл NavigationService.js.

import { NavigationActions } from 'react-navigation';

let _navigatorRef;

function setNavigatorRef(navigatorRef) {
  _navigatorRef = navigatorRef;
}

function navigate(routeName, params) {
  _navigatorRef.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setNavigatorRef,
};

В компоненте верхнего уровня вы можете передать Навигатор вашему сервису следующим образом.

import NavigationService from './NavigationService';

const MyNavigator = createStackNavigator({ bla bla bla })

class App extends React.Component {
  render() {
    return (
      <MyNavigator
        ref={navigatorRef => {
          NavigationService.setNavigatorRef(navigatorRef);
        }}
      />
    );
  }
}

Теперь вы можете использовать этот сервис для навигации по компоненту верхнего уровня (например, App.js). Просто используйте функцию navigate ().

NavigationService.navigate('LastScreen');