Как сделать реагировать навигации вместо компонента? - PullRequest
Новая
       11

Как сделать реагировать навигации вместо компонента?

1 голос
/ 07 апреля 2020

Я работаю над формой проверки, которая извлекает данные из API. Итак, у меня есть состояние с именем «isLogged».

Я инициализировал его как ложное, тогда, если аутентификация работает, оно меняется на true.

Итак, я пытаюсь отрендерить if-else оператор с условием if, равным "isLogged" === true, тогда я должен перейти на страницу Dashboard

, в противном случае, когда «isLogged» имеет значение false, я отображаю весь компонент формы,

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

CODE: 

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: null,
      password: null,
      isLogged: false,
    }
  }

  render() {
    if (this.state.isLogged) {
        # the command which navigate the user to Dashboard page
    } else {
      return (
        # The whole component code>
      );
    }
  }
}

Ответы [ 2 ]

1 голос
/ 07 апреля 2020

Вы можете использовать это: 

render() {
    if (this.state.isLogged) {
        this.props.navigation.navigate("Dashboard");
    }


 return (
        # The whole component code>
      );

  }
0 голосов
/ 07 апреля 2020

Лучший способ проверить подобные вещи - это использовать хуки жизненного цикла, предоставляемые реагированием, потому что вы делаете как можно более чистый метод рендеринга. Это componentDidMount. 

    class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          username: null,
          password: null,
          isLogged: false,
        }
      }
     componentDidMount(){
       if (this.state.isLogged) {
            this.props.navigation.navigate("Dashboard");
        }
     }
      render() {
        return (
            # The whole component code>
         );
      }
    }

В случае, если вы обнаружите ошибку, например, можете найти навигацию неопределенной, вам нужно будет передать ее через более высокий компонент "WithNavigation". Это добавит объект навигации в ваш реквизит. Ниже приведен код для использования WithNavigation. 

    import { withNavigation } from 'react-navigation';
     class Login extends Component {
      constructor(props) {
        super(props);

        this.state = {
          username: null,
          password: null,
          isLogged: false,
        }
      }
     componentDidMount(){
       if (this.state.isLogged) {
            this.props.navigation.navigate("Dashboard");
        }
     }
      render() {
        return (
            # The whole component code>
         );
      }
    }
export default withNavigation(Login);

Подробнее о перехватах жизненного цикла читайте в этой статье

...