У меня есть экран главного меню и кнопка, которая ведет к экрану игры (используя react-navigation). Нажатие на эту кнопку должно сразу перейти к экрану игры. На настройку игры требуется немного времени, поэтому я хочу показать значок загрузки, пока игра не будет готова. В моем классе GameComponent у меня есть следующее для конструктора, а componentDidMount:
constructor(props) {
super(props);
this.tileRowRef = React.createRef<LetterTileRow>();
this.inputRef = React.createRef<Input>();
this.currentTypedWord = '';
this.state = {
errorMessage: '',
gameLoading: true,
}
this.game = null;
}
componentDidMount(): void {
this.game = WordGame.getSingleplayerGameInstance();
this.game.setUpGame().then(() => this.gameFinishedLoading());
}
setUpGame - это функция экземпляра asyn c в классе WordGame, которая обрабатывает все игры logi c:
async setUpGame() {
this.currentGameState.currentWord = await WordGame.generateStartWord();
this.gameIsReady = true;
}
Таким образом, теоретически компонент должен монтироваться с начальным состоянием, которое загружает игра. Он должен вызывать функцию asyn c, которая устанавливает игру, а когда она завершится, он должен скрыть значок загрузки и отобразить игру. Однако этого не происходит.
Странно длинная пауза после нажатия кнопки, чтобы перейти к игре. К тому времени, когда приложение перейдет на экран игры, игра уже загружена. Чтобы убедиться, что игра на самом деле не дожидается окончания загрузки sh, я добавил искусственное ожидание в 2 секунды к функции setUpGame, и в этом случае я смог увидеть значок загрузки.
Но я действительно не понимаю, откуда взялась эта пауза. Я взял экранные записи поведения с и без строки this.game.setUpGame().then(() => this.gameFinishedLoading()); в componentDidMount. Я наложил их на нажатие кнопки в одно и то же время, и разница очень очевидна: https://drive.google.com/open?id=1IX_GyXENvmCJzvG0_TIU4deS8t6UGpjO