Предварительная загрузка ресурсов в приложении React-Native expo никогда не заканчивается - PullRequest
Новая
       23

Предварительная загрузка ресурсов в приложении React-Native expo никогда не заканчивается

0 голосов
/ 28 апреля 2019

Я пишу простое приложение с React Native и Expo.

Это приложение содержит ~ 10 изображений малого и среднего размера, которые используются в разных местах приложения.

Из того, что я прочитал, если я не кеширую эти изображения, они будут загружаться с выставки каждый раз .

По этой причине я заметил, что они, кажется, загружаются очень медленно при тестировании приложения. После создания и навигации по приложению я обнаружил, что мои изображения всплывают через несколько секунд даже после загрузки остальной части страницы.

I следовал настройке, как видно из исходного шаблона.

Вот как выглядит мой App.js (я использую реагирующую навигацию, поэтому он отличается от приведенного выше примера файла): 


export default class App extends React.Component {
  state = {
    isLoadingComplete: false
  };
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  render() {
    _loadResourcesAsync = async () => {
      return Promise.all([
        Asset.loadAsync([
          require("./assets/syria.png"),
          require("./assets/lebanon.png"),
          require("./assets/kenya.png"),
          require("./assets/indonesia.png"),
          require("./assets/somalia.png"),
          require("./assets/india.png"),
          require("./assets/america.png"),
          require("./assets/albania.png"),
          require("./assets/bosnia.png")
        ])
      ]);
    };
    _handleLoadingError = error => {
      Alert.alert(error);
    };

    _handleFinishLoading = () => {
      this.setState({ isLoadingComplete: true });
    };

    if (this.state.isLoadingComplete == false) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <AppContainer
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      );
    }
  }
}

Ради краткости я исключил свой код реагирующей навигации.

Когда я запускаю это, мое приложение застревает на Downloading JavaScript bundle 100.00%.

Кажется, что _handleFinishLoading никогда не запускается. По крайней мере, это единственная причина, по которой я вижу, что она никогда не заканчивает загрузку.

Учитывая небольшое количество изображений, я не знаю, как это может занять больше секунды. Вместо этого он навсегда сидит на заставке.

Есть идеи о том, что я могу здесь делать неправильно?

1 Ответ

0 голосов
/ 28 апреля 2019

Нашел решение:

Я допустил простую ошибку.Асинхронные функции (_loadResourcesAsync, _handleFinishLoading и т. Д.) Должны быть вне метода визуализации.Перемещение их ниже моего метода рендеринга внутри класса приложения привело к тому, что это сработало, как и ожидалось.

...